Error when downloading large files with firefox.

[Akayeshmantha]

Hi, Am trying to download 2.7gb file with firefox with the fetch example. It's not working actually the whole system gets stuck any idea. Am using the latest version 76.0 from friefox.

[jimmywarting]

Um...

• OS?
• Memory?
• Using secure context? meaning: https or http? (localhost is a secure context)
• code sample? Do you download everything first and then save or do you actually pipe stuff.
• what are you trying to save? remote file from cloud? blob's? multiple files bundle into a zip? a webcam recording?

dose https://jimmywarting.github.io/StreamSaver.js/examples/plain-text.html works for you? just tested writing 3gb+ lorem ipsum in latest FF on Mac. Was a bit flaky but it worked maybe was writing (enqueuing chunks) a bit too fast... made the page a little unresponsive.

[Akayeshmantha]

Hi @jimmywarting

OS is ubuntu Memory 32gb serving file from a node server (actually its ubuntu.iso filr) Works perfectly fine with google chrome.

Code sample serving from angular client but inside index.html just trying to test things

$start.onclick = () => {
    const url = 'http://localhost:8081/downloadFile'
    const fileStream = streamSaver.createWriteStream('ubuntu.iso')

    fetch(url).then(function(response) {
        // The response is a Response instance.
        // You parse the data into a useable format using `.json()`
        return response.body;
    }).then(res => {
        const readableStream = res
        debugger
        // more optimized
        if (window.WritableStream && readableStream.pipeTo) {
            return readableStream.pipeTo(fileStream)
                .then(() => console.log('done writing'))
        }

        window.writer = fileStream.getWriter()

        const reader = res.getReader()
        const pump = () => reader.read()
            .then(res => res.done ?
                writer.close() :
                writer.write(res.value).then(pump))

        pump()
    })
}

[jimmywarting]

It looks alright.

But if you are downloading file from the server, can't you just append content-disposition attachment header and download it the good old way instead of emulating it using streamsaver? it would work a lot better.

If you are using express.js then you could use res.download

res.download('/assets/ubuntu.iso', 'ubuntu.iso')

And then you just have to navigate to the url (redirect, create a hidden iframe, use <a href download> or create a <form> submit (if you need anything else the GET method))

with server solution and without express.js

var fileName = 'ubuntu.iso'
// Make filename RFC5987 compatible
var fileName = encodeURIComponent(fileName).replace(/['()]/g, escape).replace(/\*/g, '%2A')
headers.set('Content-Disposition', "attachment; filename*=UTF-8''" + fileName)

without server solution (don't work so well with cross origin):

<a href="http://localhost:8081/downloadFile" download="ubuntu.iso">
  download ubuntu.iso
</a>

[Akayeshmantha]

Hi @jimmywarting. Is it possible to pause cancel downloads if I move with the old way ?

[1000TurquoisePogs]

If using an <a> tag, doesn't the information about the download & control over it entirely bypass JS? That's a problem we're trying to overcome, since we're trying to develop a program that has similarities to a S/FTP program, but in the browser & without browser extensions (we develop a "virtual desktop" and want to put a file transfer program within it). We're exploring what's possible, and ideally we'd like to track progress of the download in that UI, so having it pass through JS would be best if the performance is alright.

[jimmywarting]

ah, okey I see, for such applications i guess you would want some more control over it. but there would also be some pros to use the native download manager instead. theres is cons with streamsaver too.

Is it possible to pause cancel downloads if I move with the "old" way ?

Yes if you do it in the browsers own native UI, you can't do it from the virtual desktop.

doesn't the information about the download & control over it entirely bypass JS?

yea, it dose.

ideally we'd like to track progress of the download in that UI

then you would have to do it with StreamSaver, but the native UI can show a progress too and how fast you are downloading and how much you have left.

Safari can't pipe data directly to the disk since they didn't add support to download content generated by service worker, so a blob is built in memory and then saved, hence why the "old" way would be better. A problem you will have with StreamSaver is that the download will feel like a native background download so they might think it's fine to close/reload the page but since the download is going throught the main thread you would have to show a confirmation dialog on unload event to not abort the download. the old native way will just download it in the background

the 2nd problem with streamsaver is that you can't always detect when/if the client aborts the download from the native UI - so you will continue to download the hole file in vain. and the virtual desktop would still show it as if it's being downloaded.

Pausing is all fine and dandy when you do it from your own UI, but when they pause from the native browser UI, then you wouldn't truly know the state of the download. you can kind of figure it out based on the pull rate and the bucket overflow, but you would never be 100% accurate

---

PS there is also this thing called background-fetch that could be useful for you.

[Akayeshmantha]

Hi @jimmywarting, for now, we are not considering Safari but firefox and chrome for sure.

A problem you will have with StreamSaver is that the download will feel like a native background download so they might think it's fine to close/reload the page but since the download is going through the main thread you would have to show a confirmation dialog on unload event to not abort the download. the old native way will just download it in the background Hmm @1000TurquoisePogs any thoughts on this.

[Akayeshmantha]

Also @jimmywarting, one small thing is there a possibility to download directory with files.

so in an FTP program like Filezilla, you always download into the folder you navigated to. you go to /my/folder, then if you download folder "a" with a/b/c, it recursively downloads into there. D is is it possible to do that too?

[jimmywarting]

Folder download is only going to be possible with native file system api you could sign up for an Origin Trial https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md

2nd best solution would be to zip and download

PS. i built a adpater/polyfill here: https://github.com/jimmywarting/native-file-system-adapter

[Akayeshmantha]

thanks alot @jimmywarting it helped alot.