Загрузка ajax FormData - несколько событий прогресса в Chrome и Firefox, только одно в Safari?

Question

** РЕДАКТИРОВАТЬ: работает в Firefox

Я только начинаю работать с отправкой форм через XMLHttpRequest. Я усовершенствовал стандартную форму для отправки таким образом, основываясь на коде, найденном на этом сайте и в других руководствах. Форма включает в себя файл ввода, а расширение предназначено для отображения процента загрузки (в виде текста и индикатора выполнения). Это прекрасно работает в Chrome и Firefox, но в Safari кажется, что событие progress срабатывает только один раз, в начале загрузки. Отправка формы проходит правильно, но процент остается близким к 0%, пока загрузка не будет завершена.

Есть ли какая-то хитрость в Safari? Я искал часы и не могу найти никаких специальных инструкций. Я пробовал демонстрацию штрих-кода, и в Safari все работает правильно. Теперь я думаю, что, возможно, это связано с чем-то на сервере, но я не уверен, где искать, если это может быть проблемой ... Любые советы будут высоко оценены.

Вот код:

function enhanceFormWithUploadProgress(form, progress, text, fill) {
//form : the HTML form element to enhance.
//progress : an HTML element that will display upload progress.

  //testing browser support. if no support for the required js APIs, the form will just be posted naturally with no progress showing.
  var xhr = new XMLHttpRequest();
  if (!(xhr && ('upload' in xhr) && ('onprogress' in xhr.upload)) || !window.FormData) {
      return;
  }

  form.addEventListener('submit', function(e) {
    //prevent regular form posting
    e.preventDefault();

    xhr.upload.addEventListener('loadstart', function(e) {
      //initializing the progress indicator (here we're displaying an element that was hidden)
      progress.style.display = 'flex';
    }, false);

    xhr.upload.addEventListener('progress', function(e) {
      //displaying the progress value as text percentage, may instead update some CSS to show a bar

      if (e.lengthComputable) {
        //var percent = (100 * event.loaded / event.total);
        var percent = Math.floor((e.loaded / e.total) * 100);
        console.log(percent);
        fill.style.width = percent + '%';
        text.innerText = 'Uploading: ' + percent + '%';
      }
    }, false);

    xhr.upload.addEventListener('load', function(e) {
      //this will be displayed while the server is handling the response (all upload data has been transmitted by now)
      text.innerText = 'Completed...';
    }, false);

    xhr.addEventListener('readystatechange', function(e) {
      console.log(xhr.readyState + ' - ' + xhr.status + ': ' + xhr.statusText);
      if (e.target.readyState == 4 && e.target.responseText) {
        //we got a response from the server and we're replacing the whole current document content with it, simulating a page reload
        var newDocument = document.open('text/html', 'replace');
        newDocument.write(e.target.responseText);
        newDocument.close();
      }
    }, false);

    //posting the form with the same method and action as specified by the HTML markup
    xhr.open(this.getAttribute('method'), this.getAttribute('action'), true);
    xhr.setRequestHeader('Cache-Control', 'no-cache');
    xhr.send(new FormData(this));

  });

};