# andreispdev/advance-upload-manager architecture

> Architecture diagram of the GitHub repository andreispdev/advance-upload-manager, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/andreispdev/advance-upload-manager
- Repository: https://github.com/andreispdev/advance-upload-manager

## Overview

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/src/server.ts`](https://github.com/andreispdev/advance-upload-manager/blob/main/server/src/server.ts) (Express API), [`server/src/config/db.ts`](https://github.com/andreispdev/advance-upload-manager/blob/main/server/src/config/db.ts) (MySQL pool), [`client/src/App.tsx`](https://github.com/andreispdev/advance-upload-manager/blob/main/client/src/App.tsx) (App shell), [`client/src/components/FileList.tsx`](https://github.com/andreispdev/advance-upload-manager/blob/main/client/src/components/FileList.tsx) (File listing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App shell<br/>[App.tsx]"]
  node_upload_ui["Upload interface<br/>[FileUpload.tsx]"]
  node_list_ui["File listing<br/>[FileList.tsx]"]
end

subgraph group_server["API server"]
  node_server["Express API<br/>[server.ts]"]
  node_upload_mw["Upload middleware<br/>[upload.ts]"]
  node_mysql_pool["MySQL pool<br/>[db.ts]"]
end

subgraph group_storage["File and metadata storage"]
  node_disk[("Upload files")]
  node_mysql[("MySQL database")]
end

node_user(("User"))

node_user -->|"opens"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_upload_ui
node_app -->|"renders"| node_list_ui
node_user -->|"selects files"| node_upload_ui
node_upload_ui -->|"POST /upload"| node_server
node_server -->|"dispatches upload"| node_upload_mw
node_upload_mw -->|"writes files"| node_disk
node_server -->|"inserts metadata"| node_mysql_pool
node_mysql_pool -->|"writes records"| node_mysql
node_list_ui -->|"GET /files"| node_server
node_server -->|"queries records"| node_mysql_pool
node_mysql_pool -->|"reads records"| node_mysql
node_server -->|"serves /uploads"| node_disk
node_list_ui -->|"loads file URLs"| node_server

click node_entry "https://github.com/andreispdev/advance-upload-manager/blob/main/client/src/main.tsx"
click node_app "https://github.com/andreispdev/advance-upload-manager/blob/main/client/src/App.tsx"
click node_upload_ui "https://github.com/andreispdev/advance-upload-manager/blob/main/client/src/components/FileUpload.tsx"
click node_list_ui "https://github.com/andreispdev/advance-upload-manager/blob/main/client/src/components/FileList.tsx"
click node_server "https://github.com/andreispdev/advance-upload-manager/blob/main/server/src/server.ts"
click node_upload_mw "https://github.com/andreispdev/advance-upload-manager/blob/main/server/src/middleware/upload.ts"
click node_mysql_pool "https://github.com/andreispdev/advance-upload-manager/blob/main/server/src/config/db.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_app,node_upload_ui,node_list_ui,node_user toneBlue
class node_server,node_upload_mw,node_mysql_pool toneAmber
class node_disk,node_mysql toneMint
```

## Components

### Web client

- [React entry](https://github.com/andreispdev/advance-upload-manager/blob/main/client/src/main.tsx): `client/src/main.tsx`
- [App shell](https://github.com/andreispdev/advance-upload-manager/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Upload interface](https://github.com/andreispdev/advance-upload-manager/blob/main/client/src/components/FileUpload.tsx): `client/src/components/FileUpload.tsx`
- [File listing](https://github.com/andreispdev/advance-upload-manager/blob/main/client/src/components/FileList.tsx): `client/src/components/FileList.tsx`

### API server

- [Express API](https://github.com/andreispdev/advance-upload-manager/blob/main/server/src/server.ts): `server/src/server.ts`
- [Upload middleware](https://github.com/andreispdev/advance-upload-manager/blob/main/server/src/middleware/upload.ts): `server/src/middleware/upload.ts`
- [MySQL pool](https://github.com/andreispdev/advance-upload-manager/blob/main/server/src/config/db.ts): `server/src/config/db.ts`

### File and metadata storage

- **Upload files**
- **MySQL database**

### Other components

- **User**

## Connections

- 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