12

I was wondering if it was possible to stream data from javascript to the browser's downloads manager.

Using webrtc, I stream data (from files > 1Gb) from a browser to the other. On the receiver side, I store into memory all this data (as arraybuffer ... so the data is essentially still chunks), and I would like the user to be able to download it.

Problem : Blob objects have a maximum size of about 600 Mb (depending on the browser) so I can't re-create the file from the chunks. Is there a way to stream these chunks so that the browser downloads them directly ?

  • 1
    bugs.chromium.org/p/chromium/issues/detail?id=375297 seems to be the most appropriate example of what i'm currently facing (this example uses multiple files, but the same error occurs with 1 big file) ... It's from one year ago, so I would be glad to be proven wrong, but I think it hasn't been fixed yet ? – Brian Mar 5 '17 at 23:05
  • Was able to create and read var b = new Blob([new Uint8Array(500*1024*1024)], {type: 'application/octet-string'}); though var b = new Blob([new Uint8Array(500*1024*1024), new Uint8Array(500*1024*1024)], {type: 'application/octet-string'}); logged Uncaught RangeError: Array buffer allocation failed – guest271314 Mar 5 '17 at 23:12
  • I have the same problem; I was planning to break up the stream into smaller files and offer each as a separate download. – Meirion Hughes Mar 5 '17 at 23:15
  • 1
    The limit should be 2GB on Chrome 57 which is 9 days from now. – zer00ne Mar 5 '17 at 23:35
  • 3
    @Brian See StreamSaver.js – guest271314 Mar 6 '17 at 1:24
3

Following @guest271314's advice, I added StreamSaver.js to my project, and I successfully received files bigger than 1GB on Chrome. According to the documentation, it should work for files up to 15GB but my browser crashed before that (maximum file size was about 4GB for me).

Note I: to avoid the Blob max size limitation, I also tried to manually append data to the href field of a <a></a> but it failed with files of about 600MB ...

Note II: as amazing as it might seem, the basic technic using createObjectURL works perfectly fine on Firefox for files up to 4GB !!

  • 13
    Can you include working example of implementation at Answer? – guest271314 Mar 7 '17 at 22:03
2

if you want to fetch a large file blob from an api or url, you can use streamsaver.

npm install streamsaver

then you can do something like this

import { createWriteStream } from 'streamsaver';

export const downloadFile = (url, fileName) => {
  return fetch(url).then(res => {
    const fileStream = createWriteStream(fileName);
    const writer = fileStream.getWriter();
    if (res.body.pipeTo) {
      writer.releaseLock();
      return res.body.pipeTo(fileStream);
    }

    const reader = res.body.getReader();
    const pump = () =>
      reader
        .read()
        .then(({ value, done }) => (done ? writer.close() : writer.write(value).then(pump)));

    return pump();
  });
};

and you can use it like this:

const url = "http://urltobigfile";
const fileName = "bigfile.zip";

downloadFile(url, fileName).then(() => { alert('done'); });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.