2

I'm setting up a file upload (using https://github.com/blueimp/jQuery-File-Upload). I want to list all the files that the user drops for upload and give each one a progress bar. It has an event handler for "progress" for each file being uploaded, but I can't seem to find a way to identify which file the progress is for:

$('.uploader').fileupload(
{
    dropZone: $('.upload-drop-zone'),
    dataType: 'json',
    url: uploadUrl,
    progress: function (e, data) 
    {
        // data.files is an array of several files, so I don't know which file this progress event is for???

        var progress = parseInt(data.loaded / data.total * 100, 10);
    }
});


// Later on I use this to start the upload of files
$('.uploader').fileupload('send', { files: myArrayOfFiles });

So the file upload starts and the progress event is called properly, but I don't know which file the progress event is for. Anyone know how to identify the file that the event relates to so I can update the proper progress bar in the file list?

matt
  • 670
  • 2
  • 9
  • 18
  • 1
    You can compare the `.size` of the `File` object to `event.total`. See also [Upload multiple image using AJAX, PHP and jQuery](http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/) – guest271314 Jan 21 '17 at 06:42
  • i guess that could work for most situations. However, it's possible that 2 or more files could be the same size, so it's not ideal. – matt Jan 21 '17 at 15:26

0 Answers0