Question

Regarding jQuery File Upload, there is a progress event which passes back a data object, which as I understand it, reports the progress for each file.

I’m adding the file and progress bars to my UI via the add() event, and I want to later update their respective progress bars inside the progress() event. The problem I’m having is how do I match them up?

I need to give each file a unique ID so I can pair them, but one isn’t provided as far as I can see. How are we supposed to do this?

Is there perhaps some JavaScript hashcode for each File object?

Some code:

$('#fileupload').fileupload({
    url: 'api/combox_upload.php',
    dataType: 'json',
    dropZone: $dropZone,
    done: function (e, data) {
        $.each(data.result, function(index, file) {
            // indicate completeness
        });
    },
    add: function(e, data) {
        $.each(data.files, function(index, file) {
            console.log(file);
            $file_uploads.append($('<li>').text(file.name));
        });
        data.submit(); // start upload immediately
    },
    progress: function(e, data) {
        console.log(data);
    }
});

---

I think I can attach a unique ID to each file by utilizing $.data like so:

var fileId = 0;

$('#fileupload').fileupload({
    url: 'api/combox_upload.php',
    dataType: 'json',
    dropZone: $dropZone,
    done: function (e, data) {
        $.each(data.result, function(index, file) {
            // indicate completeness
        });
    },
    add: function(e, data) {
        $.each(data.files, function(index, file) {
            //console.log(file);
            console.log(filename, fileId);
            $.data(file, 'id', fileId++);
            $file_uploads.append($('<li>').text(file.name));
        });
        data.submit(); // start upload immediately
    },
    progress: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $.each(data.files, function(index, file) {
            console.log($.data(file,'id'), file.name, progress);
        });
        //console.log(data);
    }
});

The part that I’m confused about now is that in the progress event it doesn’t just give you a single file, it gives you an array holding 1 file… I’m not sure if that if it’s guaranteed to always have exactly 1 file in there (data.files) or not.

Answer 1

I should just read the section called How to tie a file to an element node during the life cycle of an upload:

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});