Progress for a fetch blob javascript

I'm trying to do a javascript fetch to grab a video file using fetch. I am able to get the file downloaded and get the blob URL, but I can't seem to get the progress while its downloading.

I tried this:

    let response = await fetch('test.mp4');            const reader = response.body.getReader();            const contentLength=response.headers.get('Content-Length');            let receivedLength = 0;       d=document.getElementById('progress_bar');      while(true)       {          const {done, value} = await reader.read();                    if (done)           {              break;          }          receivedLength += value.length;          d.innerHTML="Bytes loaded:"+receivedLength;      }            const blob = await response.blob();            var vid=URL.createObjectURL(blob);  

The problem is that I get "Response.blob: Body has already been consumed". I see that the reader.read() is probably doing that. How do I just get the amount of data received and then get a blob URL at the end of it?

Thanks.

https://stackoverflow.com/questions/67362823/progress-for-a-fetch-blob-javascript May 03, 2021 at 10:26AM