Member Avatar for jchimz

This is my code to upload files with a progress bar. Problem is all three progress bars are listening for one file and not three different files. Please help me.

$('.btnUpload').click(function(){
    //submit all form
    $('form').submit();
});
$(document).on('submit','form',function(e){
    e.preventDefault();

    $form = $(this);

    uploadImage($form);

});

function uploadImage($form) {
    alert("in");
    $('.progress-bar')
    var formdata = new FormData($form[0]); //formelement
    var request = new XMLHttpRequest();

    //progress event...
    request.upload.addEventListener('progress', function (e) {
        var percent = Math.round(e.loaded / e.total * 100);
        $('.progress-bar').width(percent + '%').html(percent + '%');
    });

    //progress completed load event
    request.addEventListener('load', function (e) {
        $('.progress-bar').html('upload completed....');
         $('#gallery').hide();
    });

    request.open('post', 'upload.php');
    request.send(formdata);

    $form.on('click', '.cancel', function () {
        request.abort();

        $('.progress-bar')
            .html('upload aborted...');
    });
}



<p><input name="userImage[]" type="file" class="inputFile" /><p> <div class="progress"> <div class="progress-bar" style="width:0%"></div> </div> <p><input name="userImage[]" type="file" class="inputFile" /><p> <div class="progress"> <div class="progress-bar" aria-valuenow="0" aria-valuemin="0"
             aria-valuemax="100" style="width: 0%"> </div> </div> <p><input name="userImage[]" type="file" class="inputFile" /><p> <div class="progress"> <div class="progress-bar" style="width: 0%;"> </div> </div>
  • 2 Contributors
  • 1 Reply
  • 207 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

The observed behavior happens because the code builds a single upload request for the whole form and the progress handler updates the generic selector $('.progress-bar'), which matches every bar on the page. 's idea of pairing inputs and bars by index will work, but is brittle when DOM order changes. A safer approach is to create one XHR per file (or per selected file) and bind each XHR's upload progress event to the specific progress-bar found by DOM relation or a data- attribute.

Example (one XHR per file; find the progress bar relative to the input):

$('form').on('submit', function(e){
  e.preventDefault();
  $(this).find('input[type=file]').each(function(){
    var fileInput = this;
    if (!fileInput.files || !fileInput.files.length) return;
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append('userImage', file);

    var xhr = new XMLHttpRequest();
    var $bar = $(fileInput).closest('p').next('.progress').find('.progress-bar');

    xhr.upload.onprogress = function(evt){
      if (!evt.lengthComputable) return;
      var pct = Math.round(evt.loaded / evt.total * 100);
      $bar.css('width', pct + '%').text(pct + '%');
    };
    xhr.onload = function(){ $bar.text('Upload complete'); };
    xhr.open('POST', 'upload.php', true);
    xhr.send(fd);

    $(fileInput).data('xhr', xhr); // so a cancel button can call .abort()
  });
});

Notes and troubleshooting

  • Use DOM traversal or a data-target on the input to map to the correct bar instead of relying on element index.
  • Check evt.lengthComputable before dividing; otherwise percent is unreliable.
  • Store each XHR (e.g. via $.data) so a per-file cancel button can call xhr.abort() and update only that bar.
  • If the UI must upload all files in one request but still show per-file progress, server-side chunking or a resumable library (tus/Resumable-style) is required; otherwise per-file XHRs are the simplest, most predictable fix.

This ties back to 's original form-level FormData and single-XHR approach: switching to per-file requests keeps each progress bar isolated and cancelable.

Member Avatar for Member #120589

I can't see where a specific progress-bar is linked to the specific input. You could link them via indexes (inputFile and progress-bar), e.g. .inputFile[i] and .progress-bar[i]

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.