AJAX upload showing progress of only file in multiple file uploads

Question

Please help me change the code below. I have multiple files being uploaded from the HTML. The ajax the posts all uploaded files to a php script which sends feedback to the p

Answer 1

If you are targeting HTML5 you can access the file size of each file individually and compare it to the e.loaded try the following:

please note that the supplied code does not validate each file input, you will need to add the relevant validation

If you want to see the progress please don't use files that are small in size.

Please see working example: https://jsfiddle.net/n2exsLb7/5/

function postFile() {
    var formdata = new FormData();

    formdata.append('file1', $('#file1')[0].files[0]);
    formdata.append('file2', $('#file2')[0].files[0]);
    formdata.append('file3', $('#file3')[0].files[0]);

    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function (e) {
        var file1Size = $('#file1')[0].files[0].size;
        var file2Size = $('#file2')[0].files[0].size;
        var file3Size = $('#file3')[0].files[0].size;

        if (e.loaded <= file1Size) {
            var percent = Math.round(e.loaded / file1Size * 100);
            $('#progress-bar-file1').width(percent + '%').html(percent + '%');
        } else if (e.loaded > file1Size && e.loaded <= (file1Size + file2Size)){
           $('#progress-bar-file1').width(100 + '%').html(100 + '%');
           var percent = Math.round((e.loaded / (file1Size + file2Size) * 100));
           $('#progress-bar-file2').width(percent + '%').html(percent + '%');
        } else if (e.loaded > (file1Size + file2Size) && e.loaded <= (file1Size + file2Size + file3Size)) {
           $('#progress-bar-file1').width(100 + '%').html(100 + '%');
           $('#progress-bar-file2').width(100 + '%').html(100 + '%');
           var percent = Math.round(e.loaded / (file1Size + file2Size + file3Size) * 100);
           $('#progress-bar-file3').width(percent + '%').html(percent + '%');
        } else if (e.loaded > (file1Size + file2Size + file3Size)) {
           $('#progress-bar-file1').width(100 + '%').html(100 + '%');
           $('#progress-bar-file2').width(100 + '%').html(100 + '%');
           $('#progress-bar-file3').width(100 + '%').html(100 + '%');
        }

        if(e.loaded == e.total){
           $('#progress-bar-file1').width(100 + '%').html(100 + '%');
           $('#progress-bar-file2').width(100 + '%').html(100 + '%');
           $('#progress-bar-file3').width(100 + '%').html(100 + '%');
       }
  });   

  request.open('post', '/echo/html/');
  request.timeout = 45000;
  request.send(formdata);
}

You will have to updated your file's id's and progress id's accordingly, please see blow:

  <input id="file1" name="userImage[]" type="file" class="inputFile" />
  <div class="progress">
    <div id="progress-bar-file1" class="progress-bar" style="width:0%"></div>
  </div>

  <input id="file2" name="userImage[]" type="file" class="inputFile" />     
  <div class="progress">
    <div id="progress-bar-file2" class="progress-bar" style="width: 0%"> </div>
  </div>
  <input id="file3" name="userImage[]" type="file" class="inputFile" />
  <div class="progress">
    <div id="progress-bar-file3" class="progress-bar" style="width: 0%;"></div>
  </div>