jQuery File Upload: using counter inside of $.each

Question

I'm using jQuery-File-Upload's fileuploaddone callback to insert hidden inputs to the form to send it to the server:

$('#fileupload').bind('fileuploaddone', function (e, data) {
    $.each(data.files, function (index, file) {
        $('<input type="hidden" name="file' + index + '" value="' + file.name + '">').appendTo('#fileupload');
    }); 
});

The problem is that counter index doesn't increment. That what is inserted into my form:

<input type="hidden" name="file0" value="filename.png">
<input type="hidden" name="file0" value="filename2.png">
etc

I tried to use a separate counter:

$('#fileupload').bind('fileuploaddone', function (e, data) {
    var i = 0;
    $.each(data.files, function (index, file) {
        $('<input type="hidden" name="file' + i + '" value="' + file.name + '">').appendTo('#fileupload');
        i++;
    }); 
});

But result is the same. What is the trick?

Answer 1

Your collections data.files only contain 1 object each, hence why your counters/index never increment.

Take a look at the following line.

$('#fileupload').bind('fileuploaddone', function (e, data) {

The event 'fileuploaddone' is occurring for each file.