Refreshing the page after completing uploads in jQuery Multi file Uploader

Question

I'm using jQuery Multifile uploader (https://github.com/blueimp/jQuery-File-Upload) with PHP

and I want to refresh the uploads page once all files got uploaded, I'm using basic plus UI, please tell me if is there any easy way to achieve it

Submergible

Answer 1

Use the done and fail events along with some counters. Found these events in the options documentation.

var fileCount = 0, fails = 0, successes = 0;

$('#fileupload').fileupload({
    url: 'server/php/'
}).bind('fileuploaddone', function(e, data) {
  fileCount++;
  successes++;
  console.log('fileuploaddone');
  if (fileCount === data.getNumberOfFiles()) {
    console.log('all done, successes: ' + successes + ', fails: ' + fails);
    // refresh page
    location.reload();
  }
}).bind('fileuploadfail', function(e, data) {
  fileCount++;
  fails++;
  console.log('fileuploadfail');
  if (fileCount === data.getNumberOfFiles()) {
    console.log('all done, successes: ' + successes + ', fails: ' + fails);
    // refresh page
    location.reload();
  }
});

Petulant

Answer 2

You can use the stop event. It is equivalent to the global ajaxStop event (but for file upload requests only).

stop: function(e){
      location.reload();
}

Hollis

Answer 3

I have used this code and so far it works well.

$('#fileupload').bind('fileuploadstop', function (e) {
  console.log('Uploads finished');        
    location.reload(); // refresh page
    });

Casper

Answer 4

I used ryan's code, but there was a problem. The value of data.getNumberOfFiles() was decreasing as the files were uploaded while fileCount was increasing, so my upload script got interrupted at the middle of my upload where data.getNumberOfFiles() was equal to fileCount.

Here is how i tweaked ryan's script and now it's working like a charm:

var fileCount = 0, fails = 0, successes = 0;
var _totalCountOfFilesToUpload = -1;

$('#fileupload').bind('fileuploaddone', function (e, data) {
    if (_totalCountOfFilesToUpload < 0) {
         _totalCountOfFilesToUpload = data.getNumberOfFiles();
    }
    fileCount++;
    successes++;
    if (fileCount === _totalCountOfFilesToUpload) {
        console.log('all done, successes: ' + successes + ', fails: ' + fails);
        // refresh page
        location.reload();
    }
}).bind('fileuploadfail', function(e, data) {
    fileCount++;
    fails++;
    if (fileCount === _totalCountOfFilesToUpload) {
        console.log('all done, successes: ' + successes + ', fails: ' + fails);
        // refresh page
        //location.reload();
    }
});

I hope this will help other people as well as! :)

Prajna