• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
MrGo2

MrGo2

untitled-3286

Public
Like
untitled-3286
Home
Code
6
backend
3
frontend
3
shared
2
README.md
main.tsx
new-file-7920.tsx
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Code
/
Search
README.md

Bulk Document Upload System

A sophisticated file upload system for processing multiple invoice documents with batch management, progress tracking, and real-time status updates.

Features

  • Bulk Upload: Upload up to 100 files simultaneously
  • Progress Tracking: Real-time upload progress with detailed status
  • Batch Management: Group uploads with statistics and status monitoring
  • Multiple View Modes: List and grid views for different file quantities
  • File Management: Select, remove, retry, and cancel individual files
  • Format Support: PDF, JPG, PNG, TIFF, DOCX files up to 50MB each
  • Responsive Design: Works on desktop and mobile devices

Project Structure

β”œβ”€β”€ backend/
β”‚   β”œβ”€β”€ index.ts              # Main Hono server
β”‚   β”œβ”€β”€ routes/
β”‚   β”‚   β”œβ”€β”€ upload.ts         # File upload endpoints
β”‚   β”‚   └── batch.ts          # Batch management endpoints
β”‚   └── database/
β”‚       β”œβ”€β”€ schema.ts         # Database schema
β”‚       └── queries.ts        # Database operations
β”œβ”€β”€ frontend/
β”‚   β”œβ”€β”€ index.html            # Main HTML template
β”‚   β”œβ”€β”€ index.tsx             # React app entry point
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ App.tsx           # Main app component
β”‚   β”‚   β”œβ”€β”€ BulkUploadPage.tsx # Main upload interface
β”‚   β”‚   └── upload/           # Upload component library
β”‚   β”‚       β”œβ”€β”€ index.ts      # Component exports
β”‚   β”‚       β”œβ”€β”€ types.ts      # TypeScript types
β”‚   β”‚       β”œβ”€β”€ utils.ts      # Utility functions
β”‚   β”‚       β”œβ”€β”€ UploadContainer.tsx
β”‚   β”‚       β”œβ”€β”€ EnhancedFileUploader.tsx
β”‚   β”‚       β”œβ”€β”€ FileGalleryView.tsx
β”‚   β”‚       └── BatchStatusManager.tsx
β”‚   └── style.css             # Custom styles
└── shared/
    β”œβ”€β”€ types.ts              # Shared TypeScript types
    └── utils.ts              # Shared utility functions

API Endpoints

  • POST /api/v1/batch/upload - Upload multiple files as a batch
  • GET /api/v1/batch/:batchId/status - Get batch upload status
  • POST /api/v1/batch/:batchId/retry - Retry failed uploads in a batch
  • DELETE /api/v1/batch/:batchId - Cancel/delete a batch

Technology Stack

  • Frontend: React 18, TypeScript, TailwindCSS
  • Backend: Hono, SQLite
  • Storage: Val Town Blob Storage
  • File Processing: Built-in validation and metadata extraction

Getting Started

  1. The backend automatically serves the frontend at /
  2. Upload files by dragging and dropping or clicking "Select Files"
  3. Monitor progress in real-time with the batch summary
  4. Switch between list and grid views for better file management
  5. Use batch operations for efficient file handling

Environment Variables

No API keys required - uses Val Town's built-in services.

Code
backendfrontendsharedREADME.mdmain.tsxnew-file-7920.tsx
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
Β© 2025 Val Town, Inc.