OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to show download progress in browser's built in download manager

  • Thread starter Thread starter Kyle Hassett
  • Start date Start date
K

Kyle Hassett

Guest
I am writing a react web app and I need to download files from presigned S3 urls (or a zip from streamed from Fastapi if need be).

I want use the built in download manager UI that modern browsers have to show the download is in progress, the same way that the AWS S3 Console web app does but I cannot figure it out.

Here's what I'm looking for... Download in progress from AWS S3 Console

Here's my current code...

Code:
        for (const asset of data) {
          setCurrentAsset(data.indexOf(asset) + 1);

          const s3Response = await fetch(asset.url);

          if (!s3Response.ok) {
            alert(`Failed to download: ${asset.name}`, );
            break;
          }

          const chunks = [];
          const reader = s3Response.body!.getReader();
          const contentLength = +(s3Response.headers.get('Content-Length'))!;
          let totalDownloaded = 0;

          while (true) {
            const { done, value } = await reader!.read();
            if (done) {
              break;
            }
            chunks.push(value);
            totalDownloaded += value!.length;
            setPercentThrottled(Math.round(totalDownloaded / contentLength * 100));
          }

          const url = window.URL.createObjectURL(new Blob(chunks));
          const a = document.createElement('a');
          a.href = url;
          a.download = asset.name;
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
        }
      }

The assets appear in the download manager after all of the chunks have been streamed in, but I want to see the download as it progresses in the download manager.

Further, my backend is Fastapi. I've also used its StreamingResponse class to stream a zip of the assets in one file and that did not solve the problem.

<p>I am writing a react web app and I need to download files from presigned S3 urls (or a zip from streamed from Fastapi if need be).</p>
<p>I want use the built in download manager UI that modern browsers have to show the download is in progress, the same way that the AWS S3 Console web app does but I cannot figure it out.</p>
<p>Here's what I'm looking for...
<a href="https://i.sstatic.net/V0AoMROt.png" rel="nofollow noreferrer">Download in progress from AWS S3 Console</a></p>
<p>Here's my current code...</p>
<pre><code> for (const asset of data) {
setCurrentAsset(data.indexOf(asset) + 1);

const s3Response = await fetch(asset.url);

if (!s3Response.ok) {
alert(`Failed to download: ${asset.name}`, );
break;
}

const chunks = [];
const reader = s3Response.body!.getReader();
const contentLength = +(s3Response.headers.get('Content-Length'))!;
let totalDownloaded = 0;

while (true) {
const { done, value } = await reader!.read();
if (done) {
break;
}
chunks.push(value);
totalDownloaded += value!.length;
setPercentThrottled(Math.round(totalDownloaded / contentLength * 100));
}

const url = window.URL.createObjectURL(new Blob(chunks));
const a = document.createElement('a');
a.href = url;
a.download = asset.name;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
}
</code></pre>
<p>The assets appear in the download manager after all of the chunks have been streamed in, but I want to see the download as it progresses in the download manager.</p>
<p>Further, my backend is Fastapi. I've also used its <code>StreamingResponse</code> class to stream a <code>zip</code> of the assets in one file and that did not solve the problem.</p>
 

Latest posts

Top