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

MrGo2

untitled-3286

Public
Like
untitled-3286
Home
Code
5
backend
1
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
/
README.md
Code
/
README.md
Search
5/25/2025
Viewing readonly version of main branch: v7
View latest version
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.

FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.