File upload progress bar with jQuery not in sync with Browser

Question

I'm creating a form with 4 input type file.

For the progress bar, I use the code and suggestions from here: AJAX upload showing progress of only file in multiple file uploads It works fine for small files.

For big files (I upload each time MP3s having 30-40 minutes each file duration), the uploaded percentage doesn't correspond to the one detected by the browser.

For instance: when the 4 fields are showing 100%, in the reality the browser is still uploading (on my case, it is around 90%) Where am I wrong please? Can I sync browser and jQuery function? Please here below my code:

JS

<script>
    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]);
        formdata.append('file4', $('#file4')[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;
            var file4Size = $('#file4')[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) && e.loaded <= (file1Size + file2Size + file3Size + file4Size)) {
               $('#progress-bar-file1').width(100 + '%').html(100 + '%');
               $('#progress-bar-file2').width(100 + '%').html(100 + '%');
               $('#progress-bar-file3').width(100 + '%').html(100 + '%');
               var percent = Math.round(e.loaded / (file1Size + file2Size + file3Size + file4Size) * 100);
               $('#progress-bar-file4').width(percent + '%').html(percent + '%');
            } else if (e.loaded > (file1Size + file2Size + file3Size + file4Size)) {
               $('#progress-bar-file1').width(100 + '%').html(100 + '%');
               $('#progress-bar-file2').width(100 + '%').html(100 + '%');
               $('#progress-bar-file3').width(100 + '%').html(100 + '%');
               $('#progress-bar-file4').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 + '%');
                $('#progress-bar-file4').width(100 + '%').html(100 + '%');
            }
        });   

        request.open('POST', '/process.php);
        request.timeout = 1000000;
        request.send(formdata);
    }
</script>

HTML

<form method="POST" enctype="multipart/form-data" action="process.php ">

    <div class="field"><p class="File_n">Select File 1</p><input type="file" id="file1" class="inputfile" name="file_name[]" value="Upload file" accept="audio/mp3"/></div>
    <div class="progress-wrapper"><div id="progress-bar-file1" class="progress" style="width:0%"></div>

    <div class="field"><p class="File_n">Select File 2</p><input type="file" id="file2" class="inputfile" name="file_name[]" value="Upload file" accept="audio/mp3"/></div>
    <div class="progress-wrapper"><div id="progress-bar-file2" class="progress" style="width:0%"></div>

    <div class="field"><p class="File_n">Select File 3</p><input type="file" id="file3" class="inputfile" name="file_name[]" value="Upload file" accept="audio/mp3"/></div>
    <div class="progress-wrapper"><div id="progress-bar-file3" class="progress" style="width:0%"></div>

    <div class="field"><p class="File_n">Select File 4</p><input type="file" id="file4" class="inputfile" name="file_name[]" value="Upload file" accept="audio/mp3"/></div>
    <div class="progress-wrapper"><div id="progress-bar-file4" class="progress" style="width:0%"></div>

    <input type="submit" id="continue" onclick="postFile()" value="SEND"  />
</form>

Answer 1

I think the answer of the question is:

<input type="submit" id="continue" onclick="postFile()" value="SEND"  />

You should modify the type of input to "button" . When you clicks the button, two upload request are fired, One is submitting the form and the other is sending an ajax request which you add progress listening to.