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);
    }

Rushing

Answer 1

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);
    });

Calcine

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: #19026248 #18637345 – Hostetler

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! – Vuillard

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

Answer 2

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.

Petie