How to identify which file progress is for?

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

Answer 2

You didn't post your code that is actually calling file upload or binding to the progress event, but my guess is that you just need to put a $.proxy wrapper around the fileuploadprogress function.

The $.proxy function allows you to specify what this will refer to in the function. Then inside your function you will have access to data and this will be able to provide the context.