# ozx-68102/dash-uploader-uppy5 architecture

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

- Interactive diagram: https://gitdiagram.com/ozx-68102/dash-uploader-uppy5
- Repository: https://github.com/ozx-68102/dash-uploader-uppy5

## Overview

dash-uploader-uppy5 is a Dash file-upload component backed by Uppy 5 and a Flask upload handler. A Dash app configures an upload folder and presents the component; users select files, Uppy sends them to the server, and completion results are published as Dash props for callbacks. The documented product also supports file restrictions, appearance options, and programmatic upload, retry, cancel, and clear triggers. Python route/configuration wiring and Uppy construction were not sampled, so those links are limited to README claims and module paths.

Main entry points: [`src/components/utils/createUppy.ts`](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/utils/createUppy.ts) (Uppy instance), [`src/components/DashUploaderUppy5.tsx`](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/DashUploaderUppy5.tsx) (Uploader component), [`src/components/hooks/useSetupUppyEventHandlers.ts`](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useSetupUppyEventHandlers.ts) (Upload event handling), [`dash_uploader_uppy5/uploadhandler.py`](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/dash_uploader_uppy5/uploadhandler.py) (Upload handler)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_dash["Dash integration"]
  node_dashapp["Dash application"]
  node_configuration["Upload configuration<br/>[configurator.py]"]
  node_uploadapi["Upload component API<br/>[__init__.py]"]
  node_props["Component props<br/>[Uploader.ts]"]
  node_callback["Dash callback"]
end

subgraph group_browser["Browser uploader"]
  node_component["Uploader component"]
  node_uppy["Uppy instance<br/>[createUppy.ts]"]
  node_dashboard["Uppy Dashboard"]
  node_restrictions["File restrictions<br/>[createUppy.ts]"]
  node_eventhandlers["Upload event handling"]
  node_triggers["Trigger handlers"]
  node_uploadtrigger["Upload trigger"]
  node_retrytrigger["Retry trigger"]
  node_canceltrigger["Cancel trigger"]
  node_cleartrigger["Clear trigger"]
  node_uioptions["Dashboard options"]
end

subgraph group_server["Upload server"]
  node_flask["Flask request"]
  node_handler["Upload handler<br/>[uploadhandler.py]"]
  node_settings["Upload settings<br/>[settings.py]"]
end

subgraph group_state["Upload storage"]
  node_filesystem[("Upload folder")]
end

node_appdev(("Dash app developer"))
node_browseruser(("Uploader user"))

node_appdev -->|"configures"| node_dashapp
node_dashapp -->|"sets upload folder"| node_configuration
node_dashapp -->|"creates component"| node_uploadapi
node_uploadapi -->|"defines props"| node_props
node_props -->|"configures"| node_component
node_component -->|"creates"| node_uppy
node_component -->|"renders"| node_dashboard
node_component -->|"registers"| node_eventhandlers
node_component -->|"registers"| node_triggers
node_triggers -->|"dispatches"| node_uploadtrigger
node_triggers -->|"dispatches"| node_retrytrigger
node_triggers -->|"dispatches"| node_canceltrigger
node_triggers -->|"dispatches"| node_cleartrigger
node_uploadtrigger -->|"starts upload"| node_uppy
node_retrytrigger -->|"retries files"| node_uppy
node_canceltrigger -->|"cancels uploads"| node_uppy
node_cleartrigger -->|"clears files"| node_uppy
node_uppy -->|"applies limits"| node_restrictions
node_browseruser -->|"selects files"| node_dashboard
node_dashboard -->|"adds files"| node_uppy
node_uppy -->|"streams upload"| node_flask
node_flask -->|"dispatches request"| node_handler
node_handler -->|"saves file"| node_filesystem
node_handler -->|"returns filename"| node_uppy
node_eventhandlers -->|"observes events"| node_uppy
node_eventhandlers -->|"sets upload props"| node_dashapp
node_dashapp -->|"invokes callback"| node_callback
node_configuration -->|"configures"| node_settings
node_component -->|"applies options"| node_uioptions

click node_configuration "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/dash_uploader_uppy5/configurator.py"
click node_uploadapi "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/dash_uploader_uppy5/__init__.py"
click node_props "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/types/Uploader.ts"
click node_component "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/DashUploaderUppy5.tsx"
click node_uppy "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/utils/createUppy.ts"
click node_dashboard "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/DashUploaderUppy5.tsx"
click node_restrictions "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/utils/createUppy.ts"
click node_eventhandlers "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useSetupUppyEventHandlers.ts"
click node_triggers "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/DashUploaderUppy5.tsx"
click node_uploadtrigger "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useHandleUploadTrigger.ts"
click node_retrytrigger "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useHandleRetryTrigger.ts"
click node_canceltrigger "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useHandleCancelTrigger.ts"
click node_cleartrigger "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useHandleClearTrigger.ts"
click node_uioptions "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/DashUploaderUppy5.tsx"
click node_handler "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/dash_uploader_uppy5/uploadhandler.py"
click node_settings "https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/dash_uploader_uppy5/settings.py"

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_dashapp,node_configuration,node_uploadapi,node_props,node_callback,node_browseruser toneBlue
class node_component,node_uppy,node_dashboard,node_restrictions,node_eventhandlers,node_triggers,node_uploadtrigger,node_retrytrigger,node_canceltrigger,node_cleartrigger,node_uioptions toneAmber
class node_flask,node_handler,node_settings toneMint
class node_filesystem toneRose
class node_appdev toneIndigo
```

## Components

### Dash integration

- **Dash application**
- [Upload configuration](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/dash_uploader_uppy5/configurator.py): `dash_uploader_uppy5/configurator.py`
- [Upload component API](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/dash_uploader_uppy5/__init__.py): `dash_uploader_uppy5/__init__.py`
- [Component props](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/types/Uploader.ts): `src/components/types/Uploader.ts`
- **Dash callback**

### Browser uploader

- [Uploader component](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/DashUploaderUppy5.tsx): `src/components/DashUploaderUppy5.tsx`
- [Uppy instance](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/utils/createUppy.ts): `src/components/utils/createUppy.ts`
- [Uppy Dashboard](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/DashUploaderUppy5.tsx): `src/components/DashUploaderUppy5.tsx`
- [File restrictions](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/utils/createUppy.ts): `src/components/utils/createUppy.ts`
- [Upload event handling](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useSetupUppyEventHandlers.ts): `src/components/hooks/useSetupUppyEventHandlers.ts`
- [Trigger handlers](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/DashUploaderUppy5.tsx): `src/components/DashUploaderUppy5.tsx`
- [Upload trigger](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useHandleUploadTrigger.ts): `src/components/hooks/useHandleUploadTrigger.ts`
- [Retry trigger](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useHandleRetryTrigger.ts): `src/components/hooks/useHandleRetryTrigger.ts`
- [Cancel trigger](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useHandleCancelTrigger.ts): `src/components/hooks/useHandleCancelTrigger.ts`
- [Clear trigger](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/hooks/useHandleClearTrigger.ts): `src/components/hooks/useHandleClearTrigger.ts`
- [Dashboard options](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/src/components/DashUploaderUppy5.tsx): `src/components/DashUploaderUppy5.tsx`

### Upload server

- **Flask request**
- [Upload handler](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/dash_uploader_uppy5/uploadhandler.py): `dash_uploader_uppy5/uploadhandler.py`
- [Upload settings](https://github.com/ozx-68102/dash-uploader-uppy5/blob/main/dash_uploader_uppy5/settings.py): `dash_uploader_uppy5/settings.py`

### Upload storage

- **Upload folder**

### Other components

- **Dash app developer**
- **Uploader user**

## Connections

- Dash app developer → Dash application: configures
- Dash application → Upload configuration: sets upload folder
- Dash application → Upload component API: creates component
- Upload component API → Component props: defines props
- Component props → Uploader component: configures
- Uploader component → Uppy instance: creates
- Uploader component → Uppy Dashboard: renders
- Uploader component → Upload event handling: registers
- Uploader component → Trigger handlers: registers
- Trigger handlers → Upload trigger: dispatches
- Trigger handlers → Retry trigger: dispatches
- Trigger handlers → Cancel trigger: dispatches
- Trigger handlers → Clear trigger: dispatches
- Upload trigger → Uppy instance: starts upload
- Retry trigger → Uppy instance: retries files
- Cancel trigger → Uppy instance: cancels uploads
- Clear trigger → Uppy instance: clears files
- Uppy instance → File restrictions: applies limits
- Uploader user → Uppy Dashboard: selects files
- Uppy Dashboard → Uppy instance: adds files
- Uppy instance → Flask request: streams upload
- Flask request → Upload handler: dispatches request
- Upload handler → Upload folder: saves file
- Upload handler → Uppy instance: returns filename
- Upload event handling → Uppy instance: observes events
- Upload event handling → Dash application: sets upload props
- Dash application → Dash callback: invokes callback
- Upload configuration → Upload settings: configures
- Uploader component → Dashboard options: applies options