Blueimp jquery file upload - progress call back in context, last one doesn't update

Question

I am using: https://github.com/blueimp/jQuery-File-Upload (the basic plugin, without the ui addition)

I'm using data.context to tie link individual nodes to update the progress of each file upload, but it won't update the last one loaded. So for example if I choose 4 files, they will display on my page and the progress will work for the first 3 in the list, but not the 4th. Regardless of number selected, it's always the last one in the list. (if only 1 item is selected it works ok).

In addition it also appears that it's also not updating the relevant progress bar.

Any ideas?

Here's my code:

$('.aws').fileupload({

    limitMultiFileUploads: 1,

    dataType: 'html',

    add: function (e, data) {

            var file = data.files[0];
            var fileDetails = '<tr><td>' + 
            file.name + 
            '</td><td class="progress"><span class="progress"><span class="js-progress-active progress-active"></span>' + 
            '</span></td><td class="cancel-file"><a href="#" class="cancel-file-load-icon js-cancel-file">Cancel</a></td></tr>';

            if ($('.file-list table tr:last').length > 0) {
                data.context = $('.file-list table tr:last').after(fileDetails);
            } else {
                data.context = $(fileDetails).appendTo('.file-list table');
            }

            data.submit();
    },

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

})

UPDATE Turns out it's the 'tr:last' selector. so this doesn't work:

data.context = $('.file-list table tr:last').after(fileDetails);

but this does:

data.context = $(fileDetails).appendTo('.file-list table');

Nephology

Could you do me a favor and explain how the cancel-link works? – Treed

I've changed my code quite a lot, but to get the cancel to work I have this just before the data.submit() in the add callback: data.context.find('.js-cancel-file').bind('click', function (e) { data.jqXHR.abort(); $(this).parent('td').prev('td').text('cancelled'); $(this).unbind('click'); }); – Nephology

Awesome, thanks! Best thing is: I understand it :) – Treed

Hi Stevo, As per I understand from your updated comment, you don't need the if condition right? I mean the following code: if ($('.file-list table tr:last').length > 0) { data.context = $('.file-list table tr:last').after(fileDetails); } else { data.context = $(fileDetails).appendTo('.file-list table'); } Should become: data.context = $(fileDetails).appendTo('.file-list table'); – Pressurecook

I think so, yes. I've just looked at my code and I've got: data.context = $(fileDetails).appendTo('ul.file-list'); So I've got no test conditions and the DOM has a ul in it now, so it just appends the list item to that. therefore it doesn't matter if there aren't any in the list or not, it will still append. – Nephology

Assuming fileDetails is a tr string, this should work as well: data.context = $(fileDetails).insertAfter( $(".file-list table tr").last() ); – Sanjiv

Answer 1

Just repeat your Answer for accuracy and System consistency.
Now, Its not reproducible anymore.

"Turns out it's the 'tr:last' selector. so this doesn't work:
data.context = $('.file-list table tr:last').after(fileDetails);
but this does:
data.context = $(fileDetails).appendTo('.file-list table');"

Muscadel

Answer 2

the selector :last doesn't exist. Use :last-child instead.

data.context = $('.file-list table tr:last-child').after(fileDetails);

would be correct

Culpa