Событие xhr.onprogress срабатывает только 1 раз при старте загрузки, как исправить?

Question

[Тимофей Яценко]

Делаем прогресс бар загрузки файлов аяксом.

Сделал простой тестовый код, где создается объект xhr и в него передается форма с файлом (new FormData()).
На событие onprogress повесил обработчик.

На локальном и тестовом сервере событие срабатывает не правильно. Сразу после вызова xhr.send(formData), событие единожды вызывается, причем переменные load и total равны размеру загружаемого файла. При этом загрузка проходит успешно.

Если в качестве адреса загрузки указать другой хост, например
https://jquery-file-upload.appspot.com/ (сервер на который грузит файлы загрузчик blueimp jquery-file-upload), то прогресс начинает функционировать как положено.

Из чего я делаю вывод что с клиентским кодом все в порядке, и проблема в настройке сервера.
Нигде в документации я не видел никаких особых указаний по настройке сервера. Я решил просто сравнить заголовки на нашем сервере и сервере Google Apps (https://jquery-file-upload.appspot.com) отличий никаких не обнаружил (кроме того что в первом случае идет обычный xhr запрос а во втором CORS)

Сталкивался ли кто либо с такой проблемой?

Js код

var form = document.forms.upload;
form.onsubmit = function() {
  var file = this.elements.file1.files[0];
  console.log(file);
  if (file) upload(file); 
  return false;
}

function upload(file) {

  var xhr = new XMLHttpRequest();

  xhr.onload = xhr.onerror = function() {
    if(this.status != 200 || this.responseText != 'OK') {
      //onError(this);
      return;
    }
    console.log('Ola!');
  };


  xhr.upload.onprogress = function(event) { 
    console.log(event);
  }


  xhr.open("POST", "https://jquery-file-upload.appspot.com/", true); 
  var formData = new FormData();
formData.append("thefile", file);
xhr.send(formData);

}