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'

        }

Fractaliste · Accepted Answer · 2013-12-05 13:03:16Z

3

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);
        },
        ...

answered Dec 5, 2013 at 13:03

Fractaliste

5,99511 gold badges47 silver badges88 bronze badges

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

4 Comments

Vincent Duprez Over a year ago

Thanks! But How to know to what particular file it refers to?

Fractaliste Over a year ago

It should be embedded in the data variable. Tell me if you don't succeed in getting it.

Vincent Duprez Over a year ago

Ok found it.. there is no identification but the object stays the same

Vincent Duprez Over a year ago

added to my original question

Alpaus · Accepted Answer · 2015-03-02 10:51:20Z

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 + '%');
        }
    });

Wilt · Accepted Answer · 2015-03-19 10:25:17Z

0

In php (from version 5.4 and up) there is something called session upload progress. It allows you to monitor upload progress on individual files.

It can be pretty cumbersome to get it running but you can find some examples on how to combine it with jquery in your XMLHttpRequest / Ajax request when you search in Google.

It is also mentioned here in the documentation of the jquery file upload plugin

edited Mar 19, 2015 at 10:25

answered Mar 19, 2015 at 9:40

Wilt

44.9k15 gold badges163 silver badges216 bronze badges

Collectives™ on Stack Overflow

Individual progress in jQuery file upload

Solution

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Solution

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related