В это время многократно стреляет событие onprogress, именно в этом событии и происходит рисование прелоадера на основании таких свойств как event.loaded и event.total.
xhr.upload.onprogress = function(event) {
alert( 'Загружено на сервер ' + event.loaded + ' байт из ' + event.total );
}
xhr.onprogress = function(event) {
alert( 'Получено с сервера ' + event.loaded + ' байт из ' + event.total );
}
<div class="upload-image__progress" style="top: 100%;"></div>
Там вроде я использовал onprogress, но он работает только один раз