# thechillboy/filedroper architecture

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

- Interactive diagram: https://gitdiagram.com/thechillboy/filedroper
- Repository: https://github.com/thechillboy/filedroper

## Overview

FileDrop is a client-side file utility: users add files, inspect and transform them, then download results without uploading them to a backend. Its principal workflow runs through the browser UI and the application logic, which dispatches operations and presents queue status. The README documents image tools, metadata, batch renaming, ZIP creation, and comparison. The source excerpt is partial, so links between specific UI controls and unsampled handlers are not inferred; the app’s internal capabilities are represented at a feature level.

Main entry points: [`app.js`](https://github.com/thechillboy/filedroper/blob/main/app.js) (App controller), [`index.html`](https://github.com/thechillboy/filedroper/blob/main/index.html) (Page structure), [`styles.css`](https://github.com/thechillboy/filedroper/blob/main/styles.css) (Interface styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Browser interface"]
  node_html["Page structure<br/>[index.html]"]
  node_styles["Interface styling<br/>[styles.css]"]
end

subgraph group_files["File handling"]
  node_controller["App controller<br/>[app.js]"]
  node_intake["File drop and list<br/>[app.js]"]
  node_queue["Processing queue<br/>[app.js]"]
end

subgraph group_operations["File operations"]
  node_image["Image tools<br/>[app.js]"]
  node_metadata["File metadata<br/>[app.js]"]
  node_rename["Batch renamer<br/>[app.js]"]
  node_zip["ZIP creator<br/>[app.js]"]
  node_compare["File comparison<br/>[app.js]"]
  node_download["Download results<br/>[app.js]"]
end

subgraph group_runtime["Browser runtime"]
  node_browser["Browser APIs"]
  node_jszip["JSZip library"]
end

node_user(("User"))

node_user -->|"uses"| node_html
node_html -->|"provides controls"| node_controller
node_controller -->|"handles files"| node_intake
node_intake -->|"reads files"| node_browser
node_controller -->|"dispatches"| node_image
node_controller -->|"dispatches"| node_metadata
node_controller -->|"dispatches"| node_rename
node_controller -->|"dispatches"| node_zip
node_controller -->|"dispatches"| node_compare
node_image -->|"uses canvas"| node_browser
node_zip -->|"packages files"| node_jszip
node_controller -->|"updates status"| node_queue
node_image -->|"reports progress"| node_queue
node_rename -->|"reports progress"| node_queue
node_zip -->|"reports progress"| node_queue
node_image -->|"provides output"| node_download
node_rename -->|"provides output"| node_download
node_zip -->|"provides output"| node_download
node_download -->|"creates downloads"| node_browser
node_styles -->|"styles"| node_html

click node_html "https://github.com/thechillboy/filedroper/blob/main/index.html"
click node_styles "https://github.com/thechillboy/filedroper/blob/main/styles.css"
click node_controller "https://github.com/thechillboy/filedroper/blob/main/app.js"
click node_intake "https://github.com/thechillboy/filedroper/blob/main/app.js"
click node_queue "https://github.com/thechillboy/filedroper/blob/main/app.js"
click node_image "https://github.com/thechillboy/filedroper/blob/main/app.js"
click node_metadata "https://github.com/thechillboy/filedroper/blob/main/app.js"
click node_rename "https://github.com/thechillboy/filedroper/blob/main/app.js"
click node_zip "https://github.com/thechillboy/filedroper/blob/main/app.js"
click node_compare "https://github.com/thechillboy/filedroper/blob/main/app.js"
click node_download "https://github.com/thechillboy/filedroper/blob/main/app.js"

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_html,node_styles,node_user toneBlue
class node_controller,node_intake,node_queue toneAmber
class node_image,node_metadata,node_rename,node_zip,node_compare,node_download toneMint
class node_browser,node_jszip toneRose
```

## Components

### Browser interface

- [Page structure](https://github.com/thechillboy/filedroper/blob/main/index.html): `index.html`
- [Interface styling](https://github.com/thechillboy/filedroper/blob/main/styles.css): `styles.css`

### File handling

- [App controller](https://github.com/thechillboy/filedroper/blob/main/app.js): `app.js`
- [File drop and list](https://github.com/thechillboy/filedroper/blob/main/app.js): `app.js`
- [Processing queue](https://github.com/thechillboy/filedroper/blob/main/app.js): `app.js`

### File operations

- [Image tools](https://github.com/thechillboy/filedroper/blob/main/app.js): `app.js`
- [File metadata](https://github.com/thechillboy/filedroper/blob/main/app.js): `app.js`
- [Batch renamer](https://github.com/thechillboy/filedroper/blob/main/app.js): `app.js`
- [ZIP creator](https://github.com/thechillboy/filedroper/blob/main/app.js): `app.js`
- [File comparison](https://github.com/thechillboy/filedroper/blob/main/app.js): `app.js`
- [Download results](https://github.com/thechillboy/filedroper/blob/main/app.js): `app.js`

### Browser runtime

- **Browser APIs**
- **JSZip library**

### Other components

- **User**

## Connections

- User → Page structure: uses
- Page structure → App controller: provides controls
- App controller → File drop and list: handles files
- File drop and list → Browser APIs: reads files
- App controller → Image tools: dispatches
- App controller → File metadata: dispatches
- App controller → Batch renamer: dispatches
- App controller → ZIP creator: dispatches
- App controller → File comparison: dispatches
- Image tools → Browser APIs: uses canvas
- ZIP creator → JSZip library: packages files
- App controller → Processing queue: updates status
- Image tools → Processing queue: reports progress
- Batch renamer → Processing queue: reports progress
- ZIP creator → Processing queue: reports progress
- Image tools → Download results: provides output
- Batch renamer → Download results: provides output
- ZIP creator → Download results: provides output
- Download results → Browser APIs: creates downloads
- Interface styling → Page structure: styles