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, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

Overview

jQuery File Upload

Contents

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

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 document for a list of fixed vulnerabilities

Please also read the SECURITY document for instructions on how to securely configure your Web server for file uploads.

Setup

jQuery File Upload can be installed via NPM:

npm install blueimp-file-upload

This allows you to include jquery.fileupload.js and its extensions via node_modules, e.g:

">
<script src="node_modules/blueimp-file-upload/js/jquery.fileupload.js">script>

The widget can then be initialized on a file upload form the following way:

$('#fileupload').fileupload();

For further information, please refer to the following guides:

Requirements

Mandatory requirements

Optional requirements

Cross-domain requirements

Cross-domain File Uploads using the Iframe Transport plugin require a redirect back to the origin server to retrieve the upload results. The example implementation makes use of result.html as a static redirect page for the origin server.

The repository also includes the jQuery XDomainRequest Transport plugin, 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 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.

Testing

The project comes with three sets of tests:

  1. Code linting using ESLint.
  2. Unit tests using Mocha.
  3. End-to-end tests using blueimp/wdio.

To run the tests, follow these steps:

  1. Start Docker.
  2. Install development dependencies:
    npm install
  3. Run the tests:
    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 and tag your question with blueimp jquery file upload.

License

Released under the MIT license.

Issues
  • Error: SyntaxError: Unexpected token <

    Error: SyntaxError: Unexpected token <

    Hi im trying to upload images files but everytime i push upload

    i get this - Error: SyntaxError: Unexpected token <

    pleas help and thx for any help.

    opened by Dacarts 56
  • Upload multiple files directly to S3?

    Upload multiple files directly to S3?

    I have been using Jquery-file-upload plugin with paperclip and S3 for quite a while now and I really like it. However, as the files I need to upload become bigger, uploading directly to S3 becomes my only choice.

    This article demonstrates how to upload a single file to S3, unfortunately it doesn't do multiple files uploading.
    https://github.com/blueimp/jQuery-File-Upload/wiki/Upload-directly-to-S3

    so my question is, is it possible to iterate through a list of files and create a single post form for each file on the fly?

    Or is it possible to create an independent form and then repopulate the field in each iteration?

    Any tips are greatly appreciated.

    opened by Kickyourassforever 50
  • Retain EXIF and ICC headers with client-side image processing

    Retain EXIF and ICC headers with client-side image processing

    It seems like it should be possible to retain the ICC and EXIF data by extracting the APP2 segment data from the original image and re-attach it to the resized image.

    ICC Color Profiles? For those unfamiliar, let me explain: Perhaps you have heard of sRGB, RGB, CMYK, etc. These are color mappings that instruct devices how to render the colors. When this data is stripped from the image, the colors get all fucked up. Eg. CMYK image is upload, profile is stripped, server displays image, browser reads is as untagged RGB, displays in sRGB color space, resulting wrong colors. Blues shift to purple, grey to black, etc.

    Normally the best way to manage mismatched color spaces is through conversion with Image Magick (reading the source profile and then converting to sRGB, which is a standardized color profile for computer monitors).

    However, once the image has the ICC profile stripped with Canvas resize, the conversion cannot be peformed in Image magick because the original color space is unknown.

    I've seen a solution for this (Grabbing the ICC info from the JPG header and reinserting it) in pupload: https://github.com/moxiecode/plupload/blob/master/src/javascript/plupload.html5.js

    However, I have been unsuccessful thus far in integrating it.

    feature 
    opened by edeis 38
  • All works but

    All works but "Empty file upload result" error appears

    I'm using basic example and keep getting "Empty file upload result" error although all files are uploading correctly. I checked permissions for "files" and "thumbnails" folders - it's okay too (I tried 775 and 777). Can somebody help me?

    opened by michellekg 36
  • Problems with iframe upload

    Problems with iframe upload

    So I had the uploader setup and working just fine, or so I thought ... turns out it didn't work in IE because it (in all its iterations) does not support AJAX uploads. So I've been trying to get it to work with the options 'forceIframeTransport' set to true.

    I have the basic plugin included, the iframe-transport file too ... and I have the upload script on the server returning text/html as advised in the documentation. I have it working ... almost ... all the variables are getting sent to the server properly except the actual file and I can't figure out why.

    At first I thought it was just an IE thing, but with the 'forceIframeTransport' option set to true, google Chrome is doing the same thing.

    I 'm worried that I might not fully understand what 'The Iframe Transport requires a file input selection to upload files.' means. I have a file input, which I'm using to add file info to the UI for each file selection ... is there something I'm missing?

    opened by concept47 33
  • Problem with new codeigniter example

    Problem with new codeigniter example

    Hello, I tried to setup codeigniter with new example, but I keep getting error when I click "Start Upload": Unable to load the requested file: upload.php

    Images are uploaded in the uploads file, but the error is there (setup I made is the same as one in the example). Also, at the end of example author put following line: I had a problem with seeing images/thumbnails initially then I realized I had not set uploads/ directory in my .htacces file

    I am new to .htacces, so I don't know how to do this part. Can someone help me?

    opened by Brav 31
  • Plugin does not initialize with Version 5.0

    Plugin does not initialize with Version 5.0

    When I'm trying to initialize the plugin on the file upload control

    if('undefined' !== $.type($('input[type=file][name=userfile]')[0])) {
        var file_input = $('input[type=file][name=userfile]');
    
        file_input.fileUploadUI({
            uploadTable: $('#files'),
            buildUploadRow: function (files, index, handler) {
                return $('<tr><td>' + files[index].name + '<\/td>' +
                        '<td class="file_upload_progress"><div><\/div><\/td>' +
                        '<td class="file_upload_cancel">' +
                        '<button class="ui-state-default ui-corner-all" title="Cancel">' +
                        '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                        '<\/button><\/td><\/tr>');
            },
        });
    }
    

    it says: file_input.fileUploadUI is not a function

    All the dependencies are present, either css or js files, Firebug shows them loaded and ready to run.

    Some info: I'm using it in SugarCRM environment, so I've added the links to the files into the head part of the page, where the scripts and styles normally should be. The idea was to apply and initialize it to file upload control programmatically only in the case, when this control is present in the form. I don't want to apply this plugin to the whole form because this form is a part of Wizard step and any intervention into the form's normal functionality will destroy the wizard logic. The only task, the plugin can do for me is form-independent upload of the imported file before the user goes to the next Wizard step.

    Also, the Steps load themselves via AJAX ($('#content_td').html(xhr.responseText)), so there is no place for $(function) like in the examples, because it requires the page to be reloaded to initialize it.

    If it is not a bug and I'm doing anything wrong, please help me to figure out what it exactly is. Thank you.

    opened by gadeshi 30
  • IE 8 problem

    IE 8 problem

    Itry the new code on firefox and all go well, but if i try to upload a file on ie 8 a pop up show out asking me to download upload.php file. Anyone know why?

    opened by Manolo2 30
  • Does not work at all on IE9.

    Does not work at all on IE9.

    User can select image but does not appear in browser once selected. Clicking start does nothing.

    opened by joseph-adam 29
  • confirm for delete

    confirm for delete

    and would be good by settings choice for delete-confirm :)

    opened by berycz 28
  • $.type is deprecated

    $.type is deprecated

    Using $.type is deprecated according to the jQuery Migration 3.3.2 tool.

    See: https://github.com/jquery/jquery-migrate/blob/main/warnings.md#jqmigrate-jquerytype-is-deprecated

    Cause: This method returns a string that indicates the type of the argument, for example "number" or "function". However, as the JavaScript language evolves this method has become problematic because new language constructs might require this function to either return a new string (potentially breaking existing code) or somehow map new constructs into existing strings (again, potentially breaking existing code). Examples of new recent JavaScript features include asynchronous functions, class constructors, Symbols, or functions that act as iterators.

    Solution: Review code that uses jQuery.type() and use a type check that is appropriate for the situation. For example. if the code expects a plain function, check for typeof arg === "function".

    opened by melloware 2
  • Client side resize bad aliasing depending on browser

    Client side resize bad aliasing depending on browser

    Hello,

    This is not so much a "bug" as trying to learn about something we observe and maybe understanding if there can be improvements.

    We use client side resize in jquery upload to resize images to around 1200x825px height.

    We've noticed that Firefox and Chrome have noticeably different image quality after resize, but both leave much more aliasing in angled lines than server side Imagick does with its default filters (Lanczos or Mitchell).

    Is this something that can be improved somehow? Are some browsers better than others with client side resize, and what are they?

    I took an image and uploaded with client side resize off, then with it "on" in Chrome and Firefox, and I cropped out a section from each sample to demonstrate the most obvious artifacts:

    example_resize_jqueryupload

    The angled line is the most obvious, but even if you look at the "psb speakers" logo you can clearly see the Imagic resize is cleaner than the other two, especially compared to Firefox which has the worst resize.

    Is there any way to set the client side resize to use better or different resize algorithms?

    feature 
    opened by redemption 2
  • Deprecated function usage in jquery-ui

    Deprecated function usage in jquery-ui

    There's been some work towards removing deprecated function usage over the last few months. It seems the below haven't been pointed out before, so here goes:

    jQuery.isArray is deprecated; use Array.isArray

    • https://github.com/blueimp/jQuery-File-Upload/blob/f5d629abdaf480fefad8ad823cb1e2c96805bd4e/js/jquery.fileupload-ui.js#L86

    jQuery. isFunction() is deprecated. In most cases, its use can be replaced by typeof x === "function"

    • https://github.com/blueimp/jQuery-File-Upload/blob/d2535157e6005eb3c37f7d0b0042462393139c5b/js/vendor/jquery.ui.widget.js#L134
    • https://github.com/blueimp/jQuery-File-Upload/blob/d2535157e6005eb3c37f7d0b0042462393139c5b/js/vendor/jquery.ui.widget.js#L276
    opened by bytestream 16
  • Provide minified version

    Provide minified version

    I couldn't find a minified version of this project. I think this might be a main blocker for people trying to use it in theirs project.

    feature 
    opened by pbartoszek 2
  • Callback after bulk delete

    Callback after bulk delete

    Bulk delete implementation simply looks up delete buttons of selected items in file list and triggers click on them.

    https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-ui.js#L638

    Would be great if the delete requests get tracked and an event gets fired after bulk deletion completes.

    Usecase is reloading of some parts of the page after bulk delete.

    feature 
    opened by rnixx 1
  • Colors are changed when using Client-Side image resize

    Colors are changed when using Client-Side image resize

    Hello,

    When I'm uploading the attached photo and resizing the image using the 'imageMaxWidth' and 'imageMaxHeight' options, the image's colors are changed.

    When I'm not using the above options or set them to 'Number.MAX_SAFE_INTEGER', the colors are the same as the original image.

    Here is the original image: 20_Nis_Rogue_Sport-039-source

    Here is the result after uploaded to your demo site (which using 'imageMaxWidth' and 'imageMaxHeight'):

    bug 
    opened by cb-eli 1
  • Way to upload Heic files and automatically transform it into jpg

    Way to upload Heic files and automatically transform it into jpg

    Hello good morning with the new format that is available in some devices I would like to know if, as well as when capturing a photo, the same plugin transforms the image to jpg, if there is an identical way to upload files saved in heic format, transform it to jpg?

    Greetings,

    feature 
    opened by kainpro 4
  • any firebase integration sample?

    any firebase integration sample?

    my main goal would be to have this wonderful library work on a serverless envirnoment

    best regards

    feature 
    opened by inglesuniversal 3
  • Fatal error memory limit when uploading with UploadHandler.php

    Fatal error memory limit when uploading with UploadHandler.php

    When uploading a too big image I get the following error

    Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 28672 bytes) in I:\Apache242\htdocs\cfcmssmallpro_thumb_mysqli_utf4_n\cms\tinymce\filemanager\UploadHandler.php on line 596

    That is this line $this->image_objects[$file_path] = $func($file_path);

    so I think there should be a check for memory limit and the return false to stop the script

    feature 
    opened by cfconsultancy 1
  • Simple Upload does not work in IE Metro

    Simple Upload does not work in IE Metro

    Hello, When I use the Simple version of the uploader with just the Select files... and progress bar, it looks like nothing is happening when I upload a file. I am using IE 11 in it's app mode rather than it's desktop mode. The complete event is firing but it doesn't seem to have processed anything.

    To further expand since Metro is awful for debugging, when I catch e from complete, this is what it consists of: readyState: 0 getResponseHeader: function(e){var t;if(2===b){if(!c){c={};while(t=Tn.exec(a))c[t[1].toLowerCase()]=t[2]}t=c[e.toLowerCase()]}return null==t?null:t} getAllResponseHeaders: function(){return 2===b?a:null} setRequestHeader: function(e,t){var n=e.toLowerCase();return b||(e=v[n]=v[n]||e,y[e]=t),this} overrideMimeType: function(e){return b||(p.mimeType=e),this} statusCode: function(e){var t;if(e)if(2>b)for(t in e)m[t]=[m[t],e[t]];else C.always(e[C.status]);return this} abort: function(e){var t=e||w;return u&&u.abort(t),k(0,t),this} state: function(){return n} always: function(){return i.done(arguments).fail(arguments),this} then: function(){var e=arguments;return x.Deferred(function(n){x.each(t,function(t,o){var a=o[0],s=x.isFunction(e[t])&&e[t];i[o[1]](function%28%29{var e=s&&s.apply%28this,arguments%29;e&&x.isFunction%28e.promise%29?e.promise%28%29.done%28n.resolve%29.fail%28n.reject%29.progress%28n.notify%29:n[a+"With"]%28this===r?n.promise%28%29:this,s?[e]:arguments%29})}),e=null}).promise()} promise: function(e){return null!=e?x.extend(e,r):r} pipe: function(){var e=arguments;return x.Deferred(function(n){x.each(t,function(t,o){var a=o[0],s=x.isFunction(e[t])&&e[t];i[o[1]](function%28%29{var e=s&&s.apply%28this,arguments%29;e&&x.isFunction%28e.promise%29?e.promise%28%29.done%28n.resolve%29.fail%28n.reject%29.progress%28n.notify%29:n[a+"With"]%28this===r?n.promise%28%29:this,s?[e]:arguments%29})}),e=null}).promise()} done: function(){if(l){var t=l.length;(function i(t){x.each(t,function(t,n){var r=x.type(n);"function"===r?e.unique&&p.has(n)||l.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=l.length:r&&(s=t,c(r))}return this} fail: function(){if(l){var t=l.length;(function i(t){x.each(t,function(t,n){var r=x.type(n);"function"===r?e.unique&&p.has(n)||l.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=l.length:r&&(s=t,c(r))}return this} progress: function(){if(l){var t=l.length;(function i(t){x.each(t,function(t,n){var r=x.type(n);"function"===r?e.unique&&p.has(n)||l.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=l.length:r&&(s=t,c(r))}return this} complete: function(){if(l){var t=l.length;(function i(t){x.each(t,function(t,n){var r=x.type(n);"function"===r?e.unique&&p.has(n)||l.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=l.length:r&&(s=t,c(r))}return this} success: function(){if(l){var t=l.length;(function i(t){x.each(t,function(t,n){var r=x.type(n);"function"===r?e.unique&&p.has(n)||l.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=l.length:r&&(s=t,c(r))}return this} error: function(){if(l){var t=l.length;(function i(t){x.each(t,function(t,n){var r=x.type(n);"function"===r?e.unique&&p.has(n)||l.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=l.length:r&&(s=t,c(r))}return this} responseText: status: 0 statusText: error

    browser bug 
    opened by jacobbrgr 0
Owner
Sebastian Tschan
🍌banana banana banana
Sebastian Tschan
A python program to cut longer MP3 files (i.e. recordings of several songs) into the individual tracks.

I'm writing a python script to cut longer MP3 files (i.e. recordings of several songs) into the individual tracks called ReCut. So far there are two

Dönerspiess 1 Oct 27, 2021
Upload File Library For PHP ( Simple & Easy User )

Upload File Library For Backend/ServerSide PHP ( Simple & Easy For Use ), Support Multiple Upload

Lamhot Simamora 1 Oct 12, 2021
Basic anonymous and registered upload storage for temporary share file self hosted.

TMPShareX Basic anonymous and registered upload storage for temporary share file self hosted. Server Requirement PHP 7.4.8 [Support PHP 8] Nginx 1.19.

Sandy Hermansyah 1 Oct 27, 2021
PictShare is an open source image, mp4, pastebin hosting service with a simple resizing and upload API that you can host yourself.

PictShare is an open source image, mp4, pastebin hosting service with a simple resizing and upload API that you can host yourself.

Haschek Solutions 630 Jan 11, 2022
This package used to upload files using laravel-media-library before saving model.

Laravel Media Uploader This package used to upload files using laravel-media-library before saving model. In this package all uploaded media will be p

Ahmed Fathy 284 Jan 13, 2022
This project is a demo for Media-Upload package:

??️ Media-Upload-Demo This project is a demo for Media-Upload package: ?? Installation guide As always you need to: composer install Then npm install

Mohamed Hafidi 2 Jan 8, 2022
Private file storage and share with user build with laravel and vue inspired by google drive

LaravelDrive is a file storage system that allows store private file and share with users build wiht laravel and vue inspired by google drive. Laravel

Shahadat Hossain 57 Dec 25, 2021
Media gallery with CKEditor, TinyMCE and Summernote support. Built on Laravel file system.

Documents ・ Installation ・ Integration ・ Config ・ Customization ・ Events ・ Upgrade ・ Demo ・ FAQ Features File upload and management Uploading validati

UniSharp 1.7k Jan 14, 2022
A lightweight file manager with full ShareX, Screencloud support and more

XBackBone is a simple, self-hosted, lightweight PHP file manager that support the instant sharing tool ShareX and *NIX systems. It supports uploading

Sergio Brighenti 532 Jan 14, 2022
Flysystem adapter for Google Cloud Storage

Flysystem adapter for Google Cloud Storage This package contains a Google Cloud Storage driver for Flysystem. Notice This package is a fork from super

Spatie 18 Dec 28, 2021
A php sharex uploader with discord embed function/twitter card support

Sharex Uploader Simple Sharex Uploader with Discord embed function Download replace your data and upload to your sevrer

Clynt 4 Jan 9, 2022
☁️ Nextcloud server, a safe home for all your data

Nextcloud Server ☁ A safe home for all your data. Why is this so awesome? ?? ?? Access your Data You can store your files, contacts, calendars and mor

Nextcloud 18k Jan 19, 2022
Watch changes in the file system using PHP

Watch changes in the file system using PHP This package allows you to react to all kinds of changes in the file system. Here's how you can run code wh

Spatie 124 Jan 8, 2022
File manager module for the Lumen PHP framework.

Lumen File Manager File manager module for the Lumen PHP framework. Please note that this module is still under active development. NOTE: Branch 5.1 i

Digia 39 Apr 29, 2021
Gotipath Storage is a file storage library for PHP. It provides one interface to interact with FTP/SFTP.

Gotipath Storage is a file storage library for PHP. It provides one interface to interact with FTP/SFTP. When you use this package, you're protected from vendor lock-in, That mean you can connect to any FTP/SFTP storage. Also it's comes with base URL option to connect Gotipath CDN.

Gotipath 2 Nov 3, 2021
Detects file type by filename or content and generates correct mimetype.

FileTypeDetector Files type detector based on file name extension or file content (binary content). Usage Installation Supported formats Usage File Ty

Sergey 24 Jan 11, 2022
kodbox is a file manager for web. It is a newly designed product based on kodexplorer.

kodbox is a file manager for web. It is a newly designed product based on kodexplorer. It is also a web code editor, which allows you to develop websites directly within the web browser.You can run kodbox either online or locally,on Linux, Windows or Mac based platforms

warlee 517 Jan 18, 2022
A web based file manager,web IDE / browser based code editor

KodExplorer Update to kodbox: https://github.com/kalcaddle/kodbox Download | Demo It is recommended to use a new design upgrade product:kodbox 该项目处于维护

warlee 5.5k Jan 15, 2022