Upload File, one at a time

Question

I have a doubt about how to send one file at a time after the previous one is complete (I have a multiple input) but sending one at a time but (if the files are large sends both at the same time and the Progress bar is swinging from one % to another because of being 2 or more the same time), I wanted it to move to the next upload only after the first one has uploaded.

(function () {
    var fileCatcher = document.getElementById('file-catcher');
    var fileInput = document.getElementById('file-input');
    var fileListDisplay = document.getElementById('file-list-display');

    var fileList = [];
    var renderFileList, sendFile;


  fileCatcher.addEventListener('submit', function (evnt) {
    evnt.preventDefault();
    fileList.forEach(function (file,index) {//meti index aqui
            sendFile(file,index);//meti index aqui
    });
  });

  fileInput.addEventListener('change', function (evnt) {
        fileList = [];
    for (var i = 0; i < fileInput.files.length; i++) {
        fileList.push(fileInput.files[i]);
    }
    renderFileList();
  });

  renderFileList = function () {
    fileListDisplay.innerHTML = '';
    fileList.forEach(function (file, index) {
        var fileDisplayEl = document.createElement('p');
      fileDisplayEl.innerHTML = (index + 1) + ': ' + file.name;
      fileListDisplay.appendChild(fileDisplayEl);
      $("#howmany").html(index + 1);
    });
  };

  sendFile = function (file,index) {//meti o index aqui
    var formData = new FormData();
    var request = new XMLHttpRequest();


//console.log(file);

request.upload.addEventListener('progress',function(e){



    var percent = Math.round(e.loaded/e.total * 100)

    //document.querySelector('#progress').innerHTML = Math.round(e.loaded/e.total * 100) + '%';
    $('.progress-bar').width(percent + '%')
    $('.progress-bar').html('<div id="progress-status">'+percent+'%- '+ $('#donee').html() + ' de ' + $('#howmany').html() +' Completos</div>')
    $('#percenttt').html(percent);



},false)


formData.set('file', file);
request.open("POST", 'https://1fiafqj.oloadcdn.net/uls/LUeG8UDnFMyzix84');
request.send(formData);

   request.onreadystatechange = function() {
    if(request.readyState == 4 && request.status == 200) 
    {
                $("#donee").html(index + 1);

                    //console.log(http.responseText);
                    //$('#logs').text(request.responseText);
                    console.log(JSON.parse(request.responseText));//imprime em Json
                    $(".progress-bar").addClass("progress-bar-success");
                    $(".progress-bar").removeClass("active");
                    $(".progress-bar").html('<div id="progress-status">'+ $('#percenttt').html() +'% - '+ $('#donee').html() + ' de ' + $('#howmany').html() +' Completos</div>');
                    //console.log($('.progress-bar').width());          
    }
}
};
})();