Individual progress in jQuery file upload

Question

I've been recommended to use jQuery file upload by blueimp.

But I fail to update the individual file progress. I understand how the combined progress works (as documented)

progressall: function (e, data) 
        {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
            console.log(progress);
        }

How to do the same thing for every single upload? How do I retrieve the DOM element (progressbar) linked to this particular upload? I was thinking about creating an id by filename and file size, but as users could upload the same file twice (to different destinations) this doesn't work.

This is my implementation at the moment:

$('#fileupload').fileupload(
    {
        dataType: 'json',
        done: function (e, data) 
        {
            $.each(data.result.files, function (index, file) 
            {  
                //$('<p/>').text(file.name).appendTo(document.body); 
                //console.log('done with '+file.name);
            });
        },
        progressall: function (e, data) 
        {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            //$('#progress .bar').css('width', progress + '%');
            //console.log(progress);
        }
    }).on('fileuploadadd', function (e, data) 
    {
        $.each(data.files, function (index, file) 
        {

            var node = $('<div class="progressBox"></div>');
            node.append('<div class="progressBoxBack"></div>');
            node.append('<p><span class="progress-filename">'+file.name+' ('+index+')</span><br /><span class="progress-info">0%  0 ko/s  0 sec left</span></p>');
            node.append('<div class="progressBar"><div style="width:23%;"></div></div>');

            node.appendTo($('#progressContainer'));
        });
    });

Can anybody tell me how or point me to documentation I haven't been able to find?

Solution

---

To identify the upload, you can add additional parameters to the file object when added. the file object stays the same in the progress event (But not in the done method) So on fileuploadadd:

.on('fileuploadadd', function (e, data) 
    {
        $.each(data.files, function (index, file) 
        {
            file.uploadID = 'someidentification' ;
        });
    });

then when you handle progress:

progress: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);

              console.log(data.files[0].uploadID); // returns 'someidentification'

        }

Answer 1

According to the documentation there is a single progress event :

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        progress: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);
        },
        ...

Answer 2

I understand this is an old question but it comes up quite high in the Google Search results on this topic and the answer provided may be more complicated than required for the standard use case.

The data object provides a context property which you can set when you add the file to tie a DOM element to that particular file upload. This is passed around and is available in the done callback and you can simply use it to affect the progress within the linked DOM element.

$("#fileupload").fileupload({

        ...

        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },

        ...

        progress: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            data.context.text(progress + '%');
        }
    });