jQuery File Upload Plugin: trigger an event when all files are uploaded

Question

I use the jQuery File Upload Plugin (http://blueimp.github.io/jQuery-File-Upload/) to manage my file uploads. It works pretty well.

I can detect when each individual file is uploaded and (for example) display a message.

But I would like to detect when every files are uploaded to display a final message.

How to do such thing?

Below is my actual implementation:

    $('#fileupload').fileupload({
        url: "api/fileManager",
        dataType: 'json',
        maxFileSize: 100000000, // 100 MB for testing!
        dropZone: $(document.body)
    }).on('fileuploadchange', function (e, data) {
        // nothing here
    }).on('fileuploaddrop', function (e, data) {
        // nothing here
    }).on('fileuploadsend', function (e, data) {
        // displaying the loading & progress bar
        $('#loading').show().html('<small><b>' + rscTransport.loading + '</b></small>');
        $('#progress').show();
    }).on('fileuploaddone', function (e, data) {
        // here this is called for each individual file
        if (typeof data.result != 'undefined') {
            ctxTransport.getDocumentsByType(data.result.typeId, documents);
            log('Fichier chargé avec succès.', '', true);
        } else {
            logError('Pas de réponse du serveur.');
        }            
    }).on('fileuploadfail', function (e, data) {
        alert('Error: ' + data.jqXHR.statusText + ' : ' + data.jqXHR.responseText);
        $('#loading').empty().hide();
        $('#progress').hide();
        $('#progress .bar').css('width', '0%');
    }).on('fileuploadprocessalways', function (e, data) {
        // nothing here
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#loading').html('<small><b>' + rscTransport.loading + progress + '% </b></small>');
        $('#progress .bar').css('width', progress + '%');
        if (data.loaded == data.total) {
            $('#loading').empty().hide();
            $('#progress').hide();
            $('#progress .bar').css('width', '0%');
        }            
    });

Possible duplicate of [jQuery File Upload - how to recognise when all files have uploaded](http://stackoverflow.com/questions/13011716/jquery-file-upload-how-to-recognise-when-all-files-have-uploaded) — tirdadc, Jan 11 '16 at 14:37

score 9 · Accepted Answer · answered Jul 10 '13 at 14:26

9

It is recommended that you use the stop callback:

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#stop

answered Jul 10 '13 at 14:26

ravibhagw

1,740
17
28

For some reason this event also seems to fire after each individual image is uploaded, rather than when the whole batch is complete. – Philip Stratford Jan 23 '20 at 13:29

score 4 · Answer 2 · answered Mar 25 '16 at 13:21

4

One another way is using the plugin API to retrieve the number of active uploads in fileuploaddone callback:

var activeUploads = $('#fileupload').fileupload('active');

When all files are uploaded on the server, activeUploads == 1. You can then use it this way:

var $fileInput = $('#fileupload');

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

Take a look here: Number of active uploads JQuery-File-Upload.

Hope it helps!

answered Mar 25 '16 at 13:21

BoCyrill

1,219
16
17

If you use the callback version of `done`, you need to use `$(event.target)` instead of `$fileInput`. – GreenRaccoon23 Nov 17 '16 at 18:54
Ops, this leaded to a problem if some of our customers. If they pick for example 20 pictures, even before it ends, activeUploads trigger "All uploads done" and uploads are stoped. Don't know why, no error in console, no way to simulate in other machines. – Marcelo Agimóvel Jan 15 '19 at 18:45

score 0 · Answer 3 · answered Aug 28 '15 at 10:57

0

As an alternative to the plugin options and callbacks, I've solved the same issue with pure jQuery. I have the following lines in a javascript function that calls the "upload all" button:

    $(document).ajaxStop(function(){
        alert('All uploads done');
        $(this).unbind("ajaxStop");
    });

answered Aug 28 '15 at 10:57

XaviQV

185
2
8

I upvoted you a while ago, but for some reason some times it seems that fails. – Marcelo Agimóvel Jul 18 '18 at 09:26

jQuery File Upload Plugin: trigger an event when all files are uploaded

3 Answers3