Multifile upload with progress bar.

[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>

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]