HarelM commented on issue #364:
URL:
https://github.com/apache/cordova-plugin-file/issues/364#issuecomment-2816801443
This is what I got from ChatGPT, I haven't tested it though...
To download a large file in the browser using the **Fetch API** and **File
API** (and optionally **Streams API**) while keeping memory usage low, the key
is to **stream the response** and **write it incrementally** to a file rather
than loading the entire file into memory.
Here's how to do it step-by-step:
---
### ✅ Use Case: Efficiently Download a Large File via Streaming
```js
async function downloadLargeFile(url, filename) {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP error! Status:
${response.status}`);
const contentLength = response.headers.get('Content-Length');
const total = contentLength ? parseInt(contentLength, 10) : 0;
const reader = response.body.getReader();
const stream = new ReadableStream({
async start(controller) {
let received = 0;
while (true) {
const { done, value } = await reader.read();
if (done) break;
controller.enqueue(value);
received += value.length;
console.log(`Received ${received} of ${total} bytes`);
}
controller.close();
reader.releaseLock();
}
});
const blob = await new Response(stream).blob();
// Create a temporary download link and trigger download
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(blobUrl);
}
```
---
### 🔍 Why this keeps memory usage low:
- **Streaming with `ReadableStream`** avoids loading the full response into
memory.
- **`controller.enqueue()`** feeds small chunks into the `ReadableStream`.
- **`new Response(stream).blob()`** buffers the stream efficiently compared
to manually collecting chunks in an array.
- The browser handles the blob efficiently once created, especially for
download.
---
### 🧠 Bonus Tips
- **Progress Bar**: You can update a progress bar using the `received /
total` info.
- **Web Streams API**: This solution takes full advantage of it, supported
in most modern browsers.
- **Avoid collecting chunks in an array**, as that will accumulate all data
in memory — the very thing we're trying to avoid.
---
Would you like a version that saves directly to the user's disk using the
**File System Access API** (Chrome/Edge support)? That allows **real streaming
to disk**, ideal for very large files.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscr...@cordova.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscr...@cordova.apache.org
For additional commands, e-mail: issues-h...@cordova.apache.org
