CODEWITHSUNDEEP
javascriptjqueryjquery-file-uploadblueimp
daker
daker

Reputation: 3540

jQuery FileUpload callback for complete process done

I am using Blueimp Jquery File Upload plugin to upload files. I want to do stuff when the complete upload process is done. So if I for example drag and drop 4 files (at once) I want to invoke some code when all files are uploaded. How can I do that?

I've tried playing around with lots of callbacks like done, stop, progressall etc but nothing seems to be exactly what I'm looking for. I need to be sure that the last done has been called before I run my code.

I've come closest with stop but that seems to be running before done sometimes. Any ideas?

Upvotes: 0

Views: 1835

Answers (1)

maxime_039
maxime_039

Reputation: 494

UPDATE - I understand in the comments that the callbacks where triggered the same amount of time than the number of files to upload. So the correct answers is to use the callback "always" and put a counter. The count will increment each time that a file has been uploaded.

// Variables to put before the .fileUpload and to be init in "add"
var nbElementsToUpload = 0;
var nbElementsUploaded = 0;


.bind('fileuploadalways', function (e, data) {
    nbElementsUploaded++;
    if(nbElementsToUpload === nbElementsUploaded){
         /* All elements uploaded */
    }
})

You are talking about the "last" done. What do you mean by that? Are you invoking 4 times the upload or one time with 4 files?

You have a list of callbacks functions for the plugin. https://github.com/blueimp/jQuery-File-Upload/wiki/Options#callback-options

If you want to capture successful upload requests, then use "done" https://github.com/blueimp/jQuery-File-Upload/wiki/Options#done

If you want to capture all completed operations once done (including errors and abort), then use the callback "always". https://github.com/blueimp/jQuery-File-Upload/wiki/Options#always

I'm myself using this plugin without issues with "done" and "fail". Example:

}).on('fileuploaddone', function (e, data) { // code here })
  .on('fileuploadfail', function (e, data) { // code here })

You can add console.log to correctly see what happends and in which order.

Regards,

Upvotes: 1

Related Questions