jQuery File Upload

blueimp-file-upload (jQuery File Upload) is a battle-tested jQuery widget for building rich file upload experiences: multiple file selection, drag-and-drop, real-time progress bars, client-side image resizing, and inline previews for images, audio, and video. Built on the jQuery UI widget factory, it degrades gracefully from modern XHR2/FormData uploads down to an iframe-based transport for legacy browsers, and supports both classic multipart form submissions and raw file-content stream (PUT) uploads.

Beyond the core plugin, the project ships companion modules for chunked and resumable uploads, cross-domain/cross-site transfers via postMessage and XDomainRequest transports, and a full UI layer (jquery.fileupload-ui.js) with a ready-made template-driven interface. Reference server implementations for PHP and Google App Engine (Python) are included, making it straightforward to wire up an end-to-end upload pipeline on almost any backend stack.

What You Get

• Core fileupload widget - $.widget('blueimp.fileupload') handles file selection, drag & drop, and XHR/iframe transport selection automatically.
• Chunked & resumable uploads - Large files are split into Blob-sliced chunks and resumed after interruption in browsers supporting the Blob API.
• Image/audio/video preview & resizing - Companion modules (jquery.fileupload-image.js, -audio.js, -video.js) generate client-side previews and resize images before upload.
• Full drag-and-drop UI - jquery.fileupload-ui.js provides a template-driven interface with per-file progress bars, cancel/delete actions, and gallery integration.
• Reference server implementations - Ready-to-run PHP (UploadHandler.php) and Google App Engine Python backends for a complete end-to-end example.

Common Use Cases

• Admin/CMS media uploaders - Content editors drag multiple images or documents into a browser form for bulk asset management without a heavier upload service.
• User avatar/profile photo uploads - End users select or drop a single image with instant preview and client-side resize, reducing bandwidth and server-side processing.
• Large file / resumable transfer portals - Users on unreliable connections upload large files in chunks that resume after a dropped connection, improving reliability for multi-GB uploads.
• Cross-domain upload widgets embedded in third-party sites - SaaS integrators embed an upload widget that posts to a different domain via iframe/postMessage transport to centralize storage while embedding in customer domains.

Under The Hood

Architecture fileupload.js registers a jQuery UI widget ($.widget('blueimp.fileupload', {...})) using the widget factory pattern for lifecycle and option handling. It listens for change/drag/drop/paste events on configurable dropZone/pasteZone/fileInput elements, normalizes them into a unified “add” callback, and dispatches uploads through transport implementations chosen via feature detection ($.support.xhrFileUpload / blobSlice / xhrFormDataFileUpload) — XHR2 FormData when available, chunked Blob-slice transport for resumable large files, and a separate iframe-transport widget for legacy browsers without XHR upload support. Optional modules (fileupload-image.js, -audio.js, -video.js, -validate.js, -process.js) layer onto the core via jQuery UI widget inheritance and an async processing-queue pattern that lets image resize/preview run as pipeline steps before the XHR fires; fileupload-ui.js then wires the whole stack to a template-rendered DOM with per-file progress/cancel/delete controls. Because every extension subclasses and redefines widget prototype methods rather than depending on a narrow public API, changing the core widget’s option surface or event names ripples through every extension module and the UI layer.

Tech Stack Vanilla jQuery plus the jQuery UI widget factory is the only mandatory runtime dependency, with optional peers for client-side image resizing, a canvas-to-blob polyfill, and a lightweight templating engine declared as optionalDependencies. There is no bundler or build step — files are hand-authored UMD modules (AMD/CommonJS/browser-global wrapper) shipped directly via the npm files array. Dev tooling is ESLint with a shared config plus Prettier for formatting and Stylelint for CSS. Testing and demo infrastructure run via docker-compose, spinning up a browser-based unit test runner, an end-to-end test runner across multiple browsers, and reference PHP/Python backend servers for genuine end-to-end upload testing. CI runs lint plus the full docker-based test suites across two browsers.

Code Quality The test suite runs real browser-based specs against the bundled PHP upload handler using pre-encoded image fixtures, exercising actual network transports rather than mocking them — unusually thorough for a plugin of this vintage. Linting extends a shared config plus JSDoc and Prettier plugins, and JSDoc-style comments annotate functions throughout the core widget file. Error handling is callback/event-based, consistent with the jQuery UI widget convention, rather than promise-based, and there is no TypeScript — types are documented via JSDoc only, not enforced. CI runs a lint job across multiple Node versions plus full docker-based end-to-end suites across two browsers, showing real investment in cross-browser regression coverage despite the code’s age.

API Design The public API follows idiomatic jQuery UI widget conventions — initialize with a single call, then invoke exposed methods and listen for event-style callback options — so anyone familiar with jQuery UI widgets has near-zero onboarding cost. Options are declarative and documented inline with dense comments, and the UI module ships a working drop-in template so consumers can go from zero to a full drag-and-drop UI without writing their own DOM. The tradeoffs for modern developer experience are real: no ES modules or TypeScript definitions, a large undocumented-outside-comments options surface, and a wiki that serves as the actual API reference rather than the README, fragmenting documentation across two locations.