Download a file from Node.JS server with AngularJS

Question

I would like to download files with my browser from my server running with NodeJS. On the server side, to serve the file i have :

exports.download = function(req, res) {
  var filename = "33.jpg";
  var filePath = path.join(__dirname, '..', '..', 'downloads', filename);
  var stat = fs.statSync(filePath);

  var fileToSend = fs.readFileSync(filePath);

  res.writeHead(200, {
      'Content-Type': 'image/jpeg',
      'Content-Length': stat.size,
      'Content-Disposition': filename
  });
  res.end(fileToSend);
};

The file called 33.jpg exists and is 744Kb sized. The call from the client works great

On the client side with AngularJS here is how i call a post call to get the file (currently the parameter uri is not used) :

$scope.downloadTrack = function(uri) {
  $http.post('/api/files/download', {uri: uri}).then(function(response) {
    var blob = new Blob([response.data], { type: 'image/jpeg' });
    var fileName = response.headers('content-disposition');
    saveAs(blob, fileName);
  }, function(response) {
    console.log('Download error');
    console.log(response);
  });
}

The headers are ok (i can retrieve the file name)

My issue is that a file is downloaded but with a size of 1.5Mb and is unreadable. I tried different methods with streams, append data to response, pipe, etc. without success. Another point (not sure is important) : within Safari the files is opened with a broken icon displayed, within Chrome the file is saved

PS : i created the project with Yeoman if the information is useful

Thanks all

[Update] New version of server function (still not working)

exports.download = function(req, res) {
  var filename = "33.jpg";
  var filePath = path.join(__dirname, '..', '..', 'downloads', filename);
  var stat = fs.statSync(filePath);
  var fileToSend = fs.readFileSync(filePath);
  res.set('Content-Type', 'image/jpeg');
  res.set('Content-Length', stat.size);
  res.set('Content-Disposition', filename);
  res.send(fileToSend);
};

[Update 2] The double sized file contains extra "efbffd" char sequence randomly in the file making it unreadable

Same result. I guess the issue comes from the Angular method more than the Node.JS side ... — Pi Home Server
– Pi Home Server, Commented Sep 8, 2015 at 8:51

georgeawg · Accepted Answer · 2018-08-10 14:16:28Z

10

Problem solved with a definition of the response type set to blob

  $http({
      url: '/api/files/download',
      method: "POST",
      data: {
        uri: uri
      },
      responseType: 'blob'
  }).then(function (response) {
      var data = response.data;
      var headers = response.headers;
      var blob = new Blob([data], { type: 'audio/mpeg' });
      var fileName = headers('content-disposition');
      saveAs(blob, fileName);
  }).catch(function (response) {
    console.log('Unable to download the file')
  });

edited Aug 10, 2018 at 14:16

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Sep 8, 2015 at 11:41

Pi Home Server

4971 gold badge4 silver badges18 bronze badges

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

2 Comments

Satyam S Over a year ago

Error: saveAs is not defined in my console. how to resolve

Pi Home Server Over a year ago

install module angular-file-saver and put SaveAs factory as a parameter to your controller

sdgluck · Accepted Answer · 2015-09-07 16:50:07Z

1

You are sending the head of the response but not the body by using res#end instead of res#send (with an S).

exports.download = function(req, res) {
    // ...
    res.send(fileToSend);
};

From the Express documentation for res#end:

Use to quickly end the response without any data. If you need to respond with data, instead use methods such as res.send() and res.json().

edited Sep 7, 2015 at 16:50

answered Sep 7, 2015 at 16:43

sdgluck

27.8k12 gold badges82 silver badges96 bronze badges

1 Comment

Pi Home Server Over a year ago

Thanks. I corrected (also the set headers part) but the result is the same : a received file twice size than the original and unreadable by the browser (and os)

Collectives™ on Stack Overflow

Download a file from Node.JS server with AngularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related