# mxlitey/flyimg architecture

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

- Interactive diagram: https://gitdiagram.com/mxlitey/flyimg
- Repository: https://github.com/mxlitey/flyimg

## Overview

Flyimg is a temporary file and static-folder hosting service: users upload files or directory trees, receive public links, and can browse their uploads, preview content, and renew its expiry. Administrators can filter, renew, delete, and clean up stored resources. The frontend calls a single Cloudflare Worker API; the Worker coordinates object storage and metadata. An Agent Skill also supports uploads. The Worker excerpt is partial, so its documented routes and scheduled cleanup are represented without inferring internal handler wiring.

Main entry points: [`frontend/src/components/FilePreview.tsx`](https://github.com/mxlitey/flyimg/blob/main/frontend/src/components/FilePreview.tsx) (File Preview), [`worker.js`](https://github.com/mxlitey/flyimg/blob/main/worker.js) (Worker API), [`frontend/src/lib/api.ts`](https://github.com/mxlitey/flyimg/blob/main/frontend/src/lib/api.ts) (API Client), [`frontend/src/App.tsx`](https://github.com/mxlitey/flyimg/blob/main/frontend/src/App.tsx) (Web App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web Client"]
  node_frontend["Web App<br/>[App.tsx]"]
  node_upload["Upload Page<br/>[UploadPage.tsx]"]
  node_myfiles["My Files<br/>[MyImagesPage.tsx]"]
  node_admin["Admin Page<br/>[AdminPage.tsx]"]
  node_preview["File Preview<br/>[FilePreview.tsx]"]
  node_api_client["API Client<br/>[api.ts]"]
end

subgraph group_api["Worker API"]
  node_worker["Worker API<br/>[worker.js]"]
end

subgraph group_storage["Cloudflare Storage"]
  node_r2[("R2 Objects")]
  node_d1[("D1 Metadata<br/>[0001_init.sql]")]
end

subgraph group_agent["Agent Upload"]
  node_skill["Agent Skill<br/>[SKILL.md]"]
  node_agent_upload["Upload Script<br/>[upload.sh]"]
end

node_user(("User"))
node_r2_public[("Public R2")]
node_cron(("Cloudflare Cron"))
node_agent(("AI Agent"))

node_user -->|"uses"| node_frontend
node_frontend -->|"routes"| node_upload
node_frontend -->|"routes"| node_myfiles
node_frontend -->|"routes"| node_admin
node_upload -->|"uploads"| node_api_client
node_myfiles -->|"lists uploads"| node_api_client
node_admin -->|"manages files"| node_api_client
node_upload -->|"previews result"| node_preview
node_myfiles -->|"previews files"| node_preview
node_admin -->|"previews files"| node_preview
node_preview -->|"reads content"| node_api_client
node_api_client -->|"calls API"| node_worker
node_worker -->|"stores objects"| node_r2
node_worker -->|"reads and writes metadata"| node_d1
node_preview -.->|"loads direct links"| node_r2_public
node_cron -->|"triggers cleanup"| node_worker
node_agent -->|"uses"| node_skill
node_skill -->|"guides upload"| node_agent_upload
node_agent_upload -->|"uploads files"| node_worker

click node_frontend "https://github.com/mxlitey/flyimg/blob/main/frontend/src/App.tsx"
click node_upload "https://github.com/mxlitey/flyimg/blob/main/frontend/src/pages/UploadPage.tsx"
click node_myfiles "https://github.com/mxlitey/flyimg/blob/main/frontend/src/pages/MyImagesPage.tsx"
click node_admin "https://github.com/mxlitey/flyimg/blob/main/frontend/src/pages/AdminPage.tsx"
click node_preview "https://github.com/mxlitey/flyimg/blob/main/frontend/src/components/FilePreview.tsx"
click node_api_client "https://github.com/mxlitey/flyimg/blob/main/frontend/src/lib/api.ts"
click node_worker "https://github.com/mxlitey/flyimg/blob/main/worker.js"
click node_d1 "https://github.com/mxlitey/flyimg/blob/main/migrations/0001_init.sql"
click node_skill "https://github.com/mxlitey/flyimg/blob/main/skills/flyimg/SKILL.md"
click node_agent_upload "https://github.com/mxlitey/flyimg/blob/main/skills/flyimg/scripts/upload.sh"

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_frontend,node_upload,node_myfiles,node_admin,node_preview,node_api_client,node_user toneBlue
class node_worker,node_r2_public toneAmber
class node_r2,node_d1 toneMint
class node_skill,node_agent_upload toneRose
class node_cron,node_agent toneIndigo
```

## Components

### Web Client

- [Web App](https://github.com/mxlitey/flyimg/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Upload Page](https://github.com/mxlitey/flyimg/blob/main/frontend/src/pages/UploadPage.tsx): `frontend/src/pages/UploadPage.tsx`
- [My Files](https://github.com/mxlitey/flyimg/blob/main/frontend/src/pages/MyImagesPage.tsx): `frontend/src/pages/MyImagesPage.tsx`
- [Admin Page](https://github.com/mxlitey/flyimg/blob/main/frontend/src/pages/AdminPage.tsx): `frontend/src/pages/AdminPage.tsx`
- [File Preview](https://github.com/mxlitey/flyimg/blob/main/frontend/src/components/FilePreview.tsx): `frontend/src/components/FilePreview.tsx`
- [API Client](https://github.com/mxlitey/flyimg/blob/main/frontend/src/lib/api.ts): `frontend/src/lib/api.ts`

### Worker API

- [Worker API](https://github.com/mxlitey/flyimg/blob/main/worker.js): `worker.js`

### Cloudflare Storage

- **R2 Objects**
- [D1 Metadata](https://github.com/mxlitey/flyimg/blob/main/migrations/0001_init.sql): `migrations/0001_init.sql`

### Agent Upload

- [Agent Skill](https://github.com/mxlitey/flyimg/blob/main/skills/flyimg/SKILL.md): `skills/flyimg/SKILL.md`
- [Upload Script](https://github.com/mxlitey/flyimg/blob/main/skills/flyimg/scripts/upload.sh): `skills/flyimg/scripts/upload.sh`

### Other components

- **User**
- **Public R2**
- **Cloudflare Cron**
- **AI Agent**

## Connections

- User → Web App: uses
- Web App → Upload Page: routes
- Web App → My Files: routes
- Web App → Admin Page: routes
- Upload Page → API Client: uploads
- My Files → API Client: lists uploads
- Admin Page → API Client: manages files
- Upload Page → File Preview: previews result
- My Files → File Preview: previews files
- Admin Page → File Preview: previews files
- File Preview → API Client: reads content
- API Client → Worker API: calls API
- Worker API → R2 Objects: stores objects
- Worker API → D1 Metadata: reads and writes metadata
- File Preview → Public R2: loads direct links
- Cloudflare Cron → Worker API: triggers cleanup
- AI Agent → Agent Skill: uses
- Agent Skill → Upload Script: guides upload
- Upload Script → Worker API: uploads files