Мультизагрузка файлов с progress bar

$(document).ready(function() { 
  var input = $('#file-input'); 
  var button = $('#file-submit'); 
  var container = $('#file-container'); 
  input.on('change', function() { 
    var files = $(this).prop('files'); 
    for (var file of files) { 
      var elem = $('<div class="file-info"><p>' + file.name + '</p><progress class="progress-bar" max="100" value="0"></progress></div>').appendTo(container); 
      //добавляем инфу о файле в свойство превью 
      elem.get(0).file = file; 
    } 
  }); 
  //асинхронный колбек закачки файлов 
  button.on('click', async function(evt) { 
    evt.preventDefault(); 
    //пускаем закачку каждого файла параллельно с помощью Promise.all и дожидаемся закачки всех файлов с помощью await. 
    await Promise.all($('.file-info').map(upload)); 
    console.log('готово'); 
  }); 
 
  //асинхронная функция закачки файла 
  async function upload(index, elem) { 
    var data = new FormData(); 
    data.append('file', elem.file); 
    var progress = $(elem).find('.progress-bar'); 
    //ждем ответа об успешной обработке файла на стороне сервера 
    const res = await $.ajax({ 
      url: '/', 
      contentType: false, 
      processData: false, 
      data: data, 
      type: 'post', 
      xhr: function() { 
        var xhr = new XMLHttpRequest(); 
        xhr.upload.onprogress = function(evt) { 
          var percent = Math.ceil(evt.loaded / evt.total * 100); 
          progress.attr('value', percent); 
        } 
        return xhr; 
      } 
    }); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="file-form" method="post"> 
  <input id="file-input" type="file" multiple> 
  <button id="file-submit" type="button">Отправить</button><br/> 
  <div id="file-container"></div> 
</form>