Questions tagged [jquery-file-upload]

jQuery File Upload is a blueimp.net widget with multiple file selection, drag&drop support, progress bar and preview images for jQuery.

jQuery File Upload is a widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.
It supports cross-domain, chunked and resumable file uploads and client-side image resizing.
It works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

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 filemanager 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.

Useful links

1310 questions
126
votes
11 answers

Can someone explain how to implement the jQuery File Upload plugin?

EDIT (Oct 2019): 6 years later and jQuery File Upload is clearly still driving folks insane. If you're finding little solace in the answers here, try a search of NPM for a modern alternative. It's not worth the hassle, I promise. I recommended…
Austen
  • 1,931
  • 2
  • 19
  • 28
86
votes
15 answers

maxFileSize and acceptFileTypes in blueimp file upload plugin do not work. Why?

I'm using Blueimp jQuery file upload plugin for upload files. I had no problem in uploading but the option maxFileSize and acceptFileTypes do not work. This is my code: $(document).ready(function () { 'use strict'; …
YoBre
  • 2,520
  • 5
  • 27
  • 37
48
votes
4 answers

How to upload multiple files using PHP, jQuery and AJAX

I have designed a simple form which allows the user to upload files to the server. Initially the form contains one 'browse' button. If the user wants to upload multiple files, he needs to click on the "Add More Files" button which adds another…
Rivnat
  • 1,497
  • 1
  • 20
  • 34
26
votes
2 answers

Show a progress on multiple file upload Jquery/Ajax

I have upload form that allows users to upload multiple files. I decided that a progress bar would be good if the files are quite large. Below is my source code. I am new to jquery normally I would just php but I find that ajax is more user…
Paul Ledger
  • 1,125
  • 4
  • 21
  • 46
22
votes
8 answers

jQuery FileUpload doesn't trigger 'done'

I use jQuery-File-Upload plugin. I wrote a simple code to test it - and it works, but not without problems. It doesn't trigger done, even if the file is uploaded and progress bar reached its end. Here's the code: $('#file_file').fileupload({ …
Tomek Buszewski
  • 7,659
  • 14
  • 67
  • 112
21
votes
3 answers

Regular expression for excluding file types .exe and .js

I am using JQuery File upload plugin, for giving value to the option accept files I need the regular expression which will tells what are the file types to be restricted. I need to restrict both exe and js which i achieved by using below…
Vinay
  • 689
  • 3
  • 7
  • 22
21
votes
3 answers

Individual progress in jQuery file upload

I've been recommended to use jQuery file upload by blueimp. But I fail to update the individual file progress. I understand how the combined progress works (as documented) progressall: function (e, data) { var progress =…
Vincent Duprez
  • 3,772
  • 8
  • 36
  • 76
20
votes
9 answers

How to use blueimp-file-upload with webpack?

I'm using blueimp-file-upload in my website, and I'm using webpack to organize my js code. I installed blueimp-file-upload and jquery.ui.widget from NPM npm install --save blueimp-file-upload npm install --save jquery.ui.widget and I require…
Littlee
  • 3,791
  • 6
  • 29
  • 61
20
votes
2 answers

jQuery File Upload in AngularJS

I'm trying to upload a file with jQuery File Upload in combination with angularJS. I have a multistep form, this are 2 steps of my multistep form:

Identity

nielsv
  • 6,540
  • 35
  • 111
  • 215
19
votes
5 answers

jquery file upload restricting number of files

I am using jquery file upload to upload the files to the server . I want to restrict the user to upload maximum 6 files . I search the wiki jquery file upload but didnt find the parameter for it . Is there any way that i can restrict the user on…
Uahmed
  • 1,847
  • 5
  • 29
  • 45
16
votes
5 answers

Upload File using ReactJS via BlueImp FileUpload jQuery plugin

This is a newbie to ReactJS. Could anyone please advise on what to use or how to have a form (with a few input boxes and a file selector) be uploaded in React? Have been wrecking my nerves trying to use BlueImp JQuery-file-upload plugin. The error…
5122014009
  • 3,766
  • 6
  • 24
  • 34
15
votes
5 answers

Why doesn't Blueimp's jQuery-File-Upload plugin fire callbacks?

I'm experimenting with Blueimp's jQuery-File-Upload plugin, which judging by the demo looks very promising. It's really easy to implement: var $uploadButton = $("#fileop-upload");//
Wabbitseason
  • 5,641
  • 9
  • 49
  • 60
15
votes
2 answers

S3: No 'Access-Control-Allow-Origin' for AJAX POST

This issue is driving me a little nuts. I'm trying to upload files via AJAX POST to an S3 bucket. I have all the credentials correct because when I do normal HTTP POSTs it creates the resource in the S3 bucket just fine. But I would really like to…
Dan L
  • 4,319
  • 5
  • 41
  • 74
15
votes
1 answer

jQuery File Upload plugin does not work

I am trying to use jQuery File Upload plugin in my site but at the moment it has been impossible, and the documentation is the worst I have ever seen. The only things I can see are some demos files with a lot of lines of code without any kind of…
jstuardo
  • 3,901
  • 14
  • 61
  • 136
14
votes
1 answer

Rails upload to AWS creating .zip.cpgz file loop

I'm running into a weird situation where some files, specifically ZIP format, when uploaded to AWS within my Rails app are corrupted/converted. When downloaded and decompressed they turn into a CPGZ format, which decompresses back into a ZIP, and…
Jody Heavener
  • 2,704
  • 5
  • 41
  • 70
1
2 3
87 88