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 — tirdadc
– tirdadc, Commented Jan 11, 2016 at 14:37

ravibhagw · Accepted Answer · 2013-07-10 14:26:23Z

9

It is recommended that you use the stop callback:

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

answered Jul 10, 2013 at 14:26

ravibhagw

1,74017 silver badges29 bronze badges

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

1 Comment

Philip Stratford Over a year ago

For some reason this event also seems to fire after each individual image is uploaded, rather than when the whole batch is complete.

BoCyrill · Accepted Answer · 2016-03-25 13:21:10Z

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, 2016 at 13:21

BoCyrill

1,37917 silver badges19 bronze badges

2 Comments

GreenRaccoon23 Over a year ago

If you use the callback version of done, you need to use $(event.target) instead of $fileInput.

Marcelo Agimóvel Over a year ago

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.

XaviQV · Accepted Answer · 2015-08-28 10:57:30Z

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, 2015 at 10:57

XaviQV

1852 silver badges8 bronze badges

1 Comment

Marcelo Agimóvel Over a year ago

I upvoted you a while ago, but for some reason some times it seems that fails.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related