Express res.download()

Question

I don't know why it's happening, but it's really annoying. I expected the file to be downloaded according to the express docs. I have the next code:

  //in react (App.js)
  download = () => {
    const { images, target } = this.state;
    const filename = images.find(img => img.id === target).filename;
    fetch('http://localhost:3001/download', {
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({filename})
    })
  }
  //in express (server.js)
  app.post('/download', (req, res) => {
    var file = '../public/images/' + req.body.filename;
    res.download(file, req.body.filename);
  });

The folder structure:

  -server
    |-server.js
  -public
    |-images
      |-a.jpg
      |-b.jpg
  -src
    |-App.js

Nothing's happening, errors not shown. Any ideas?

You can find better solution [here](https://stackoverflow.com/questions/50694881/how-to-download-file-in-react-js) — MD SHAYON, Oct 26 '21 at 08:45

score 2 · Accepted Answer · answered Sep 18 '18 at 17:22

2

I think the issue you have is that you're using an HTTP POST instead of HTTP GET

answered Sep 18 '18 at 17:22

Rob Brander

3,702
1
20
33

With get if i build a query like `download/:filename` in the server to get the filename and use `req.params.filename` instead of `req.body.filename` (because with get i can't set body), and set the request with `fetch('http://localhost:3001/download'/ + "filename"`, i get 404 error. – Gergő Horváth Sep 18 '18 at 17:38
how about using a query string? `fetch('http://localhost:3001/download?filename=something.dat')` – Rob Brander Sep 18 '18 at 17:45
try using an absolute path instead of a relative path, e.g. `path.join(__dirname, '../public/images/' + req.param.filename)` – Rob Brander Sep 18 '18 at 21:03

score 2 · Answer 2 · edited Apr 17 '22 at 08:30

2

It was a challenge, but this worked for me.

    const express = require('express');
    const path = require('path');
    const port = process.env.PORT || process.argv[2] || 8080;
    const app = express();
 
    app.get('/', (req, res)=>{
      res.send('<a href="/download">Download</a>');
    });
 
    app.get('/download', (req, res)=>{
      res.download(path.join(__dirname, 'views/files.pug'), (err)=>{
        console.log(err);
      });
      console.log('Your file has been downloaded!')
    });
 
    app.listen(port, ()=>{
      console.log('res is up on port: ' + port);
    });

Just replace the file names with yours.

edited Apr 17 '22 at 08:30

xgqfrms

10,077
1
69
68

answered Sep 18 '18 at 18:02

Andrea Peekatchu Follack

157
3

Not downloading... :( – Gergő Horváth Sep 18 '18 at 18:07
https://arjunphp.com/download-file-node-js-express-js/ this is the link I found with further details :) – Andrea Peekatchu Follack Sep 18 '18 at 18:11
Interesting because if i see the network tab of chrome devtools, the response is 200OK, at the preview the image appears, it just don't start download. – Gergő Horváth Sep 18 '18 at 19:56

score 1 · Answer 3 · answered Apr 17 '22 at 08:42

The download method sets the Content-Disposition header which tells the browser to download it instead of navigating to it … if it were navigating to it in the first place.

You are making the request using Ajax, so the browser isn't navigating to it. The response is passed to your JS and it is the responsibility of your JS to deal with it.

You can take two approaches to this:

Don't use Ajax. Navigate to the URL instead. You can replace the Ajax request with a regular form submission (which will also require that you have body parsing middleware on the server which supports a encoding type supported by forms).
Read the response with your JS, then generate a local download from it.

Express res.download()

3 Answers3

Linked