How andreispdev/advance-upload-manager works
Advance Upload Manager lets a user select or drop multiple files, upload them with progress feedback, and browse uploaded files with previews or links. The client separates upload and listing interactions; the Express server receives uploads through Multer, writes file bytes to local disk, records metadata in MySQL, lists records, and serves stored files. The tree and sampled source support this workflow, but provide no README capability details or source for additional server subsystems.
Main entry points: server.ts Express API · db.ts MySQL pool · App.tsx App shell · FileList.tsx File listing
Components 10
Web client
- React entry
client/src/main.tsx - App shell
client/src/App.tsx - Upload interface
client/src/components/FileUpload.tsx - File listing
client/src/components/FileList.tsx
API server
- Express API
server/src/server.ts - Upload middleware
server/src/middleware/upload.ts - MySQL pool
server/src/config/db.ts
File and metadata storage
- Upload files
- MySQL database
Other components
- User
Connections 15
- User → React entry: opens
- React entry → App shell: renders
- App shell → Upload interface: renders
- App shell → File listing: renders
- User → Upload interface: selects files
- Upload interface → Express API: POST /upload
- Express API → Upload middleware: dispatches upload
- Upload middleware → Upload files: writes files
- Express API → MySQL pool: inserts metadata
- MySQL pool → MySQL database: writes records
- File listing → Express API: GET /files
- Express API → MySQL pool: queries records
- MySQL pool → MySQL database: reads records
- Express API → Upload files: serves /uploads
- File listing → Express API: loads file URLs