jQuery File Upload - how to recognise when all files have uploaded

Question

I'm using the jQuery File Upload plugin.

I would like to be able to trigger an event when all selected files have finished uploading. So far I have an event for doing an action when a file(s) is selected for uploading and when each particular file finishes uploading - is there a way to detect that all selected files have finished uploading?

The actual app is here http://repinzle-demo.herokuapp.com/upload

My input field looks like this:

<div id="fine-uploader-basic" class="btn btn-success" style="position: relative; overflow: hidden; direction: ltr;">

My script code looks like this:

<script> $(function () { $('#fileupload').fileupload({ dataType: 'json', add: function (e, data) { // when files are selected this lists the files to be uploaded $.each(data.files, function (index, file) { $('<p/>').text("Uploading ... "+file.name).appendTo("#fileList"); }); data.submit(); }, done: function (e, data) { // when a file gets uploaded this lists the name $.each(data.files, function (index, file) { $('<p/>').text("Upload complete ..."+file.name).appendTo("#fileList"); }); } }); }); </script>

I am handling the request with a Play Framework (Java) controller that looks like this:

publi

c static void doUpload(File[] files) throws IOException{ List<ImageToUpload> imagesdata = new ArrayList<ImageToUpload>(); //ImageToUpload has information about images that are going to be uploaded, name size etc. for(int i=0;i<files.length;i++){ Upload upload = new Upload(files[i]); upload.doit(); //uploads pictures to Amazon S3 Picture pic = new Picture(files[i].getName()); pic.save(); // saves metadata to a MongoDB instance imagesdata.add(new ImageToUpload(files[i].getName())); } renderJSON(imagesdata); }

spuas · Accepted Answer · 2013-03-25 17:51:31Z

22

I think you are looking for 'stop' event:

$('#fileupload').bind('fileuploadstop', function (e) {/* ... */})

as said in the plugin documentation:

Callback for uploads stop, equivalent to the global ajaxStop event (but for file upload requests only).

You can also specify the function on plugin creation passing it as parameter

$('#fileupload').fileupload({ stop: function (e) {}, // .bind('fileuploadstop', func); });

answered Mar 25, 2013 at 17:51

spuas

1,6931 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BlueWater86 Over a year ago

This frustration still exists 3 years after originally being asked. All of the answers I've seen do not fully address the problem. For the 'fileuploadstop' callback to fire only 1 time after all uploads have finished you need to pass an option of 'singleFileUploads: false'. This will cause 1 XHR request to be used for all uploads and only the callback to only be fired once. Other answers: stackoverflow.com/questions/19025748/… stackoverflow.com/questions/18636845/…

Carl Hine Over a year ago

Lol. I was trying the whole list of methods that might kick when the asynchronous upload had completed. Didn't think the stop event would be the thing to use. Thanks!

Marcelo Agimóvel Over a year ago

@BlueWater86 I checked your link but it doesn't has this "sinfleFileUploads" example, can you explain it better?

Marcelo Rocha · Accepted Answer · 2020-10-12 19:59:11Z

Here's the solution you want:

$('#fileupload').on('fileuploaddone', function(e, data) { var activeUploads = $('#fileupload').fileupload('active'); if (activeUploads == 1) { console.info("All uploads done"); } });

I was with this problem also, fixed 3 years ago.

Collectives™ on Stack Overflow

jQuery File Upload - how to recognise when all files have uploaded

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related