We are using a web frontend where we can upload big files (up to 2 GB) and we use this snippet:
const headers = { /* private */ };
const filestatus$ = this.http.put(url, file, {
observe: 'events',
reportProgress: true,
headers,
});
const sub = filestatus$.subscribe((uploadProgress) => {
switch (uploadProgress.type) {
case HttpEventType.UploadProgress:
const progress = 100 * (uploadProgress.loaded / uploadProgress.total!);
console.log('progress', progress);
break;
case HttpEventType.Response:
console.log('upload finished');
sub.unsubscribe();
break;
}
});
When I run this on my mac with Chrome, i get the logs with the progress and as soon as it reaches 100, I instantly get the "upload finished". (Long story short: Everything as expected) When I run it on Windows with Chrome I get a some of progress msgs, but only for a couple of seconds then it shows "progress 100" (which is not possible with my bandwith after that short duration) and a couple of minutes later (about the same time it takes on my mac), I get the "upload finished". If I open the dev tools, I can see the upload put request to be "pending" and when it completes I instantly get the finished. I guess that means, that the progress events are too early in Chrome on Windows.
How can I fix this?
(Of course this is usually shown as progress bar, but for debugging I used console.log)