jQuery file upload how to get number of files queued and uploaded

Question

In jQuery file uploader (http://blueimp.github.io/jQuery-File-Upload/), when I start uploading some files, I want to show a line saying "Uploaded x of y". x is the number of files successfully uploaded, and y is the number of files uploading/queued. How do I get those two numbers? I have looked at the options but I didn't find anything I can use.

If the page is refreshed during or after upload is finished, I also want to show a message called "x files uploaded". So how can I get that number? It would also be good to know how to count number of files failed during upload.

Thanks for your help.

Answer 1

Based on API documentation you can use "Callback Options" to bind event during your upload.

$('#fileupload')
    .bind('fileuploadadd', function (e, data) {/* ... */})
    .bind('fileuploadsubmit', function (e, data) {/* ... */})
    .bind('fileuploadsend', function (e, data) {/* ... */})
    .bind('fileuploaddone', function (e, data) {/* ... */})
    .bind('fileuploadfail', function (e, data) {/* ... */})
    .bind('fileuploadalways', function (e, data) {/* ... */})
    .bind('fileuploadprogress', function (e, data) {/* ... */})
    .bind('fileuploadprogressall', function (e, data) {/* ... */})
    .bind('fileuploadstart', function (e) {/* ... */})
    .bind('fileuploadstop', function (e) {/* ... */})
    .bind('fileuploadchange', function (e, data) {/* ... */})
    .bind('fileuploadpaste', function (e, data) {/* ... */})
    .bind('fileuploaddrop', function (e, data) {/* ... */})
    .bind('fileuploaddragover', function (e) {/* ... */})
    .bind('fileuploadchunksend', function (e, data) {/* ... */})
    .bind('fileuploadchunkdone', function (e, data) {/* ... */})
    .bind('fileuploadchunkfail', function (e, data) {/* ... */})
    .bind('fileuploadchunkalways', function (e, data) {/* ... */});
    // and some Processing Callback Options
    .bind('fileuploadprocessstart', function (e) {/* ... */})
    .bind('fileuploadprocess', function (e, data) {/* ... */})
    .bind('fileuploadprocessdone', function (e, data) {/* ... */})
    .bind('fileuploadprocessfail', function (e, data) {/* ... */})
    .bind('fileuploadprocessalways', function (e, data) {/* ... */})
    .bind('fileuploadprocessstop', function (e) {/* ... */});

The one you are looking for is :

add

The add callback can be understood as the callback for the file upload request queue. It is invoked as soon as files are added to the fileupload widget - via file input selection, drag & drop or add API call.

And also :

processdone

Callback for the successful end of an individual file processing queue.

Example: function (e, data) {
     console.log('Processing ' + data.files[data.index].name + ' done.'); 
}

Just keep some variable to increment and manage your display.

Also be careful not forgotting error handling (with ´ process fail´ event) if an error occurs to display proper interface.

To know about how many files you are sending, just use add events to keep track of your variable.

There is some function you can call to have those values but I would not recommend them since event binding has been build specifically to keep your code synchronized at any time.

About page refresh

You need to use a sessionStorage to keep values when refreshing a page. The easiest way is to update this value everytime your number_of_files change. (see document on MDN)

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

You just need on load (or initialization of your upload plugin) to get this value and set initial value of your variable ... this way it will keep track of previous session.

Suggestion of code

var counter = 0;
var number_of_files = 0; // or sessionStorage.getItem('number_of_files')
$('#fileupload')
    .bind('fileuploadadd', function (e, data) {
        $.each(data.files, function (index, file) {
            console.log('Added file in queue: ' + file.name);
            number_of_files = number_of_files + 1;
            sessionStorage.setItem('number_of_files', number_of_files);
        });
    })
    .bind('fileuploadprocessdone', function (e, data) {
        console.log(counter + " / " + number_of_files);
    });

You just need to have all case in your code like deletion, modification and other ... to make sure your value is always up to date. But jQuery-File-Upload is not suppose to be in charge of your view, as part of MVC pattern it only do one thing which is uploading and giving you all tools to work with that

Answer 2

The total may be displayed using queue.length in the default blueimp front end structure: (Angular can just do {{queue.length}} in the html).

Keep track of uploads complete with the callbacks in documentation: add 1 on uploaddone, etc.

If you need to track total uploaded between page loads you will need to store that in your app's back-end. Angular may do this in a service.