AngularJS with StreamSaver.js Support

Question

I want to add the following StreamSaver.js code to an AngularJS. The same syntax is not accepted so I have changes the code to suite angular.

I got the following WritableStream is not defined error.

angular-1.5.7.min.js:117 ReferenceError: WritableStream is not defined
    at Object.createWriteStream (StreamSaver.js:92)
    at m.$scope.downloadFile (profile_ctrl.js:305)

The StreamSaver Example code is working fine.

fetch(url).then(res => {
    let reader = res.body.getReader()
    let pump = () => {
        return reader.read().then(({ value, done }) => {
            if (done) {
                myFile.close()
                return
            }
            myFile.write(value)
            return pump()
        })
    }
    pump()
})

Whereas not the modified code given below.

var myFile = streamSaver.createWriteStream("filename.txt");
fetch(url).then(function(res) {
    $scope.pump = function(reader) {
        return reader.read().then(function(value, done) {
            if (done) {
                myFile.close();
                return;
            }
            myFile.write(value);
            return pump();
        });
    };
    var reader = res.body.getReader();
    $scope.pump(reader);
});

Dose your targeted browser support ES6 syntax? StreamSaver only works in chrome and opera so my examples was written using the latest syntax. You might want to convert it down to ES5 — Endless
– Endless, Commented Aug 16, 2016 at 1:18
I am getting this syntax error during code compilation. I have an angularjs website want to download files as streams. Chrome v52 is the browser I am using for testing. — srv
– srv, Commented Aug 16, 2016 at 7:26
what syntax error? do you want to use torrent? cuz you are missing interval variable — Endless
– Endless, Commented Aug 16, 2016 at 8:58
Hi @Endless, I have removed the torrent part and edited the question to reflect current error. — srv
– srv, Commented Aug 17, 2016 at 10:26
WritableStream should be defined in chrome v52, may i ask what version you are using? — Endless
– Endless, Commented Aug 17, 2016 at 11:05

srv · Accepted Answer · 2016-08-22 09:32:15Z

2

The error is because of ES6 syntax. The following code works for ES5 in chrome v52 browser.

var myFile = streamSaver.createWriteStream("filename.txt");

fetch(url).then(function(res) {
  var reader = res.body.getReader();
  $scope.pump(reader);
});

$scope.pump = function(reader) {
  return reader.read().then(function(result) {
    if (result.done) {
      myFile.close();
      return;
    }
    myFile.write(result.value);
    return $scope.pump(reader);
  });
};

answered Aug 22, 2016 at 9:32

srv

44111 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mostafa Barmshory · Accepted Answer · 2017-05-17 11:20:37Z

1

You would better to use existing packages in angularjs. For example angular-file-saver trying to wrap FileSaver.JS.

answered May 17, 2017 at 11:20

Mostafa Barmshory

2,0692 gold badges28 silver badges44 bronze badges

1 Comment

Pran Kumar Sarkar Over a year ago

filesaver.js has limits which is not good for large media files. Moreover in chrome for android, the maximum file size is amount of RAM available. So thats a major drawback of filesaver.js

Collectives™ on Stack Overflow

AngularJS with StreamSaver.js Support

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related