# blueimp/jquery-file-upload architecture

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

- Interactive diagram: https://gitdiagram.com/blueimp/jquery-file-upload
- Repository: https://github.com/blueimp/jquery-file-upload

## Overview

This is a jQuery file-upload widget, with a browser-side workflow from selecting or dropping files through processing, validation, upload transport and progress/results. Its extensions add image resizing and image/audio/video previews, while the UI renders upload state and supports cancellation and deletion. The repository also provides optional PHP and Google App Engine Python server examples. The README documents resumable, chunked, cross-domain and legacy-browser behavior; unsampled modules are represented by their exact paths, but their internal call wiring is not inferred.

Main entry points: [`js/jquery.fileupload.js`](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload.js) (Upload Widget), [`js/jquery.fileupload-process.js`](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-process.js) (File Processing), [`js/jquery.fileupload-ui.js`](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-ui.js) (Upload UI), [`server/php/index.php`](https://github.com/blueimp/jquery-file-upload/blob/master/server/php/index.php) (PHP Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser Upload"]
  node_widget["Upload Widget"]
  node_ui["Upload UI"]
  node_iframe["Iframe Transport"]
end

subgraph group_extensions["Processing Extensions"]
  node_processor["File Processing"]
  node_validation["File Validation"]
  node_image["Image Preview Resize"]
  node_audio["Audio Preview"]
  node_video["Video Preview"]
end

subgraph group_servers["Server Examples"]
  node_phpentry["PHP Entry<br/>[index.php]"]
  node_phphandler["PHP Upload Handler<br/>[UploadHandler.php]"]
  node_phpfiles[("PHP File Store")]
  node_gae["GAE Python Example<br/>[main.py]"]
end

subgraph group_crossdomain["Cross-Domain Transport"]
  node_postmessage["PostMessage Transport"]
  node_xdr["XDomainRequest Transport"]
  node_corsresult["Iframe Result Page<br/>[result.html]"]
end

node_user(("Page User"))
node_remote[("Upload Server")]

node_user -->|"selects files"| node_widget
node_widget -->|"processes files"| node_processor
node_processor -->|"runs validation"| node_validation
node_processor -->|"runs image actions"| node_image
node_processor -->|"runs audio actions"| node_audio
node_processor -->|"runs video actions"| node_video
node_ui -->|"submits uploads"| node_widget
node_ui -->|"processes before upload"| node_processor
node_widget -.->|"falls back to"| node_iframe
node_widget -->|"uploads files"| node_remote
node_widget -.->|"uses cross-domain transport"| node_postmessage
node_widget -.->|"uses limited AJAX transport"| node_xdr
node_remote -.->|"redirects results"| node_corsresult
node_phpentry -->|"instantiates"| node_phphandler
node_phphandler -.->|"stores uploads"| node_phpfiles
node_widget -.->|"can upload to"| node_phpentry
node_widget -.->|"can upload to"| node_gae

click node_widget "https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload.js"
click node_ui "https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-ui.js"
click node_iframe "https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.iframe-transport.js"
click node_processor "https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-process.js"
click node_validation "https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-validate.js"
click node_image "https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-image.js"
click node_audio "https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-audio.js"
click node_video "https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-video.js"
click node_phpentry "https://github.com/blueimp/jquery-file-upload/blob/master/server/php/index.php"
click node_phphandler "https://github.com/blueimp/jquery-file-upload/blob/master/server/php/UploadHandler.php"
click node_phpfiles "https://github.com/blueimp/jquery-file-upload/tree/master/server/php/files"
click node_gae "https://github.com/blueimp/jquery-file-upload/blob/master/server/gae-python/main.py"
click node_postmessage "https://github.com/blueimp/jquery-file-upload/blob/master/js/cors/jquery.postmessage-transport.js"
click node_xdr "https://github.com/blueimp/jquery-file-upload/blob/master/js/cors/jquery.xdr-transport.js"
click node_corsresult "https://github.com/blueimp/jquery-file-upload/blob/master/cors/result.html"

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_widget,node_ui,node_iframe,node_user toneBlue
class node_processor,node_validation,node_image,node_audio,node_video,node_remote toneAmber
class node_phpentry,node_phphandler,node_phpfiles,node_gae toneMint
class node_postmessage,node_xdr,node_corsresult toneRose
```

## Components

### Browser Upload

- [Upload Widget](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload.js): `js/jquery.fileupload.js`
- [Upload UI](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-ui.js): `js/jquery.fileupload-ui.js`
- [Iframe Transport](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.iframe-transport.js): `js/jquery.iframe-transport.js`

### Processing Extensions

- [File Processing](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-process.js): `js/jquery.fileupload-process.js`
- [File Validation](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-validate.js): `js/jquery.fileupload-validate.js`
- [Image Preview Resize](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-image.js): `js/jquery.fileupload-image.js`
- [Audio Preview](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-audio.js): `js/jquery.fileupload-audio.js`
- [Video Preview](https://github.com/blueimp/jquery-file-upload/blob/master/js/jquery.fileupload-video.js): `js/jquery.fileupload-video.js`

### Server Examples

- [PHP Entry](https://github.com/blueimp/jquery-file-upload/blob/master/server/php/index.php): `server/php/index.php`
- [PHP Upload Handler](https://github.com/blueimp/jquery-file-upload/blob/master/server/php/UploadHandler.php): `server/php/UploadHandler.php`
- [PHP File Store](https://github.com/blueimp/jquery-file-upload/tree/master/server/php/files): `server/php/files`
- [GAE Python Example](https://github.com/blueimp/jquery-file-upload/blob/master/server/gae-python/main.py): `server/gae-python/main.py`

### Cross-Domain Transport

- [PostMessage Transport](https://github.com/blueimp/jquery-file-upload/blob/master/js/cors/jquery.postmessage-transport.js): `js/cors/jquery.postmessage-transport.js`
- [XDomainRequest Transport](https://github.com/blueimp/jquery-file-upload/blob/master/js/cors/jquery.xdr-transport.js): `js/cors/jquery.xdr-transport.js`
- [Iframe Result Page](https://github.com/blueimp/jquery-file-upload/blob/master/cors/result.html): `cors/result.html`

### Other components

- **Page User**
- **Upload Server**

## Connections

- Page User → Upload Widget: selects files (evidence: `README.md`)
- Upload Widget → File Processing: processes files (evidence: `js/jquery.fileupload-process.js`)
- File Processing → File Validation: runs validation (evidence: `js/jquery.fileupload-validate.js`)
- File Processing → Image Preview Resize: runs image actions (evidence: `js/jquery.fileupload-image.js`)
- File Processing → Audio Preview: runs audio actions (evidence: `js/jquery.fileupload-audio.js`)
- File Processing → Video Preview: runs video actions (evidence: `js/jquery.fileupload-video.js`)
- Upload UI → Upload Widget: submits uploads (evidence: `README.md`)
- Upload UI → File Processing: processes before upload (evidence: `js/jquery.fileupload-ui.js`)
- Upload Widget → Iframe Transport: falls back to (evidence: `README.md`)
- Upload Widget → Upload Server: uploads files (evidence: `README.md`)
- Upload Widget → PostMessage Transport: uses cross-domain transport (evidence: `README.md`)
- Upload Widget → XDomainRequest Transport: uses limited AJAX transport (evidence: `README.md`)
- Upload Server → Iframe Result Page: redirects results (evidence: `README.md`)
- PHP Entry → PHP Upload Handler: instantiates (evidence: `server/php/index.php`)
- PHP Upload Handler → PHP File Store: stores uploads
- Upload Widget → PHP Entry: can upload to
- Upload Widget → GAE Python Example: can upload to