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)
I made my peace with calling it a bug and having to work around it. I am splitting the file "manually" into chunks, where the chunk count and size depends on the total file size. This way i can upload one chunk completely and then update the percentage of the total upload by dividing the sum of the sizes of the uploaded chunks through the total file size. This way i can also do a resume if the upload gets interrupted. (I am using Azure Blob Storage specific mechanics for the resume)