# blueimp-file-upload > File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, Latest version **10.32.0** (published 2021-09-25) · MIT license · 0 weekly downloads ## Install ```sh npm install blueimp-file-upload pnpm add blueimp-file-upload yarn add blueimp-file-upload bun add blueimp-file-upload ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: no vulnerabilities; popular repo. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 10.32.0 | | Published | 2021-09-25 | | First published | 2011-12-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 164.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 30704 | | Author | Sebastian Tschan | | Maintainers | blueimp | | Keywords | jquery, file, upload, widget, multiple, selection, drag, drop, progress, preview, cross-domain, cross-site, chunk, resume, gae, go, python, php, bootstrap | ## Links - npm: https://www.npmjs.com/package/blueimp-file-upload - Repository: https://github.com/blueimp/jQuery-File-Upload - Issues: https://github.com/blueimp/jQuery-File-Upload/issues - npm.io page: https://npm.io/package/blueimp-file-upload ## Dependencies (3) - [blueimp-tmpl](https://npm.io/package/blueimp-tmpl.md) 3 - [blueimp-load-image](https://npm.io/package/blueimp-load-image.md) 5 - [blueimp-canvas-to-blob](https://npm.io/package/blueimp-canvas-to-blob.md) 3 ## Alternatives - [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads - [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads - [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads - [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads - [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads ## Recent versions - 10.32.0 (latest) — 2021-09-25 - 10.31.0 — 2020-07-11 - 10.30.1 — 2020-06-09 - 10.30.0 — 2020-06-09 - 10.29.0 — 2020-05-22 - 10.28.0 — 2020-05-16 - 10.27.0 — 2020-05-15 - 10.26.0 — 2020-05-15 - 10.25.0 — 2020-05-13 - 10.24.0 — 2020-05-11 - 10.23.0 — 2020-05-08 - 10.22.0 — 2020-05-07 - 10.21.0 — 2020-05-05 - 10.20.0 — 2020-05-04 - 10.19.0 — 2020-05-04 - … 121 more at https://npm.io/package/blueimp-file-upload/versions ## README # jQuery File Upload ## Contents - [Description](#description) - [Demo](#demo) - [Features](#features) - [Security](#security) - [Setup](#setup) - [Requirements](#requirements) - [Mandatory requirements](#mandatory-requirements) - [Optional requirements](#optional-requirements) - [Cross-domain requirements](#cross-domain-requirements) - [Browsers](#browsers) - [Desktop browsers](#desktop-browsers) - [Mobile browsers](#mobile-browsers) - [Extended browser support information](#extended-browser-support-information) - [Testing](#testing) - [Support](#support) - [License](#license) ## Description > File Upload widget with multiple file selection, drag&drop support, progress > bars, validation and preview images, audio and video for jQuery. > Supports cross-domain, chunked and resumable file uploads and client-side > image resizing. > Works with any server-side platform (PHP, Python, Ruby on Rails, Java, > Node.js, Go etc.) that supports standard HTML form file uploads. ## Demo [Demo File Upload](https://blueimp.github.io/jQuery-File-Upload/) ## Features - **Multiple file upload:** Allows to select multiple files at once and upload them simultaneously. - **Drag & Drop support:** Allows to upload files by dragging them from your desktop or file manager and dropping them on your browser window. - **Upload progress bar:** Shows a progress bar indicating the upload progress for individual files and for all uploads combined. - **Cancelable uploads:** Individual file uploads can be canceled to stop the upload progress. - **Resumable uploads:** Aborted uploads can be resumed with browsers supporting the Blob API. - **Chunked uploads:** Large files can be uploaded in smaller chunks with browsers supporting the Blob API. - **Client-side image resizing:** Images can be automatically resized on client-side with browsers supporting the required JS APIs. - **Preview images, audio and video:** A preview of image, audio and video files can be displayed before uploading with browsers supporting the required APIs. - **No browser plugins (e.g. Adobe Flash) required:** The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins. - **Graceful fallback for legacy browsers:** Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers. - **HTML file upload form fallback:** Allows progressive enhancement by using a standard HTML file upload form as widget element. - **Cross-site file uploads:** Supports uploading files to a different domain with cross-site XMLHttpRequests or iframe redirects. - **Multiple plugin instances:** Allows to use multiple plugin instances on the same webpage. - **Customizable and extensible:** Provides an API to set individual options and define callback methods for various upload events. - **Multipart and file contents stream uploads:** Files can be uploaded as standard "multipart/form-data" or file contents stream (HTTP PUT file upload). - **Compatible with any server-side application platform:** Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads. ## Security ⚠️ Please read the [VULNERABILITIES](VULNERABILITIES.md) document for a list of fixed vulnerabilities Please also read the [SECURITY](SECURITY.md) document for instructions on how to securely configure your Web server for file uploads. ## Setup jQuery File Upload can be installed via [NPM](https://www.npmjs.com/): ```sh npm install blueimp-file-upload ``` This allows you to include [jquery.fileupload.js](js/jquery.fileupload.js) and its extensions via `node_modules`, e.g: ```html ``` The widget can then be initialized on a file upload form the following way: ```js $('#fileupload').fileupload(); ``` For further information, please refer to the following guides: - [Main documentation page](https://github.com/blueimp/jQuery-File-Upload/wiki) - [List of all available Options](https://github.com/blueimp/jQuery-File-Upload/wiki/Options) - [The plugin API](https://github.com/blueimp/jQuery-File-Upload/wiki/API) - [How to setup the plugin on your website](https://github.com/blueimp/jQuery-File-Upload/wiki/Setup) - [How to use only the basic plugin.](https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin) ## Requirements ### Mandatory requirements - [jQuery](https://jquery.com/) v1.7+ - [jQuery UI widget factory](https://api.jqueryui.com/jQuery.widget/) v1.9+ (included): Required for the basic File Upload plugin, but very lightweight without any other dependencies from the jQuery UI suite. - [jQuery Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.iframe-transport.js) (included): Required for [browsers without XHR file upload support](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support). ### Optional requirements - [JavaScript Templates engine](https://github.com/blueimp/JavaScript-Templates) v3+: Used to render the selected and uploaded files. - [JavaScript Load Image library](https://github.com/blueimp/JavaScript-Load-Image) v2+: Required for the image previews and resizing functionality. - [JavaScript Canvas to Blob polyfill](https://github.com/blueimp/JavaScript-Canvas-to-Blob) v3+:Required for the resizing functionality. - [blueimp Gallery](https://github.com/blueimp/Gallery) v2+: Used to display the uploaded images in a lightbox. - [Bootstrap](https://getbootstrap.com/) v3+: Used for the demo design. - [Glyphicons](https://glyphicons.com/) Icon set used by Bootstrap. ### Cross-domain requirements [Cross-domain File Uploads](https://github.com/blueimp/jQuery-File-Upload/wiki/Cross-domain-uploads) using the [Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.iframe-transport.js) require a redirect back to the origin server to retrieve the upload results. The [example implementation](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/main.js) makes use of [result.html](https://github.com/blueimp/jQuery-File-Upload/blob/master/cors/result.html) as a static redirect page for the origin server. The repository also includes the [jQuery XDomainRequest Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/cors/jquery.xdr-transport.js), which enables limited cross-domain AJAX requests in Microsoft Internet Explorer 8 and 9 (IE 10 supports cross-domain XHR requests). The XDomainRequest object allows GET and POST requests only and doesn't support file uploads. It is used on the [Demo](https://blueimp.github.io/jQuery-File-Upload/) to delete uploaded files from the cross-domain demo file upload service. ## Browsers ### Desktop browsers The File Upload plugin is regularly tested with the latest browser versions and supports the following minimal versions: - Google Chrome - Apple Safari 4.0+ - Mozilla Firefox 3.0+ - Opera 11.0+ - Microsoft Internet Explorer 6.0+ ### Mobile browsers The File Upload plugin has been tested with and supports the following mobile browsers: - Apple Safari on iOS 6.0+ - Google Chrome on iOS 6.0+ - Google Chrome on Android 4.0+ - Default Browser on Android 2.3+ - Opera Mobile 12.0+ ### Extended browser support information For a detailed overview of the features supported by each browser version and known operating system / browser bugs, please have a look at the [Extended browser support information](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support). ## Testing The project comes with three sets of tests: 1. Code linting using [ESLint](https://eslint.org/). 2. Unit tests using [Mocha](https://mochajs.org/). 3. End-to-end tests using [blueimp/wdio](https://github.com/blueimp/wdio). To run the tests, follow these steps: 1. Start [Docker](https://docs.docker.com/). 2. Install development dependencies: ```sh npm install ``` 3. Run the tests: ```sh npm test ``` ## Support This project is actively maintained, but there is no official support channel. If you have a question that another developer might help you with, please post to [Stack Overflow](https://stackoverflow.com/questions/tagged/blueimp+jquery+file-upload) and tag your question with `blueimp jquery file upload`. ## License Released under the [MIT license](https://opensource.org/licenses/MIT). --- _Source: https://npm.io/package/blueimp-file-upload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._