Downloading a file from a Node.JS API REST (express) with React.JS (Axios Get)

Question

I have a React JS application that as a Backend has an API REST made with Node JS.

Currently, my objective is to be able to download files that are on the server. The correct behavior should be that the user, after clicking on "Download file", should receive the file (Download with browser).

On the server-side, I have something like this (obviously, I'm gonna simplify it by removing JWT middleware, DB queries, etc..):

const express = require('express');
const router = express.Router();
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();
app.use(cors({ origin: "http://localhost:3000" }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

router.get('/download', (req, res, next) => {
  res.download("\\\\folder\\subfolder\\myfile.txt");
});

app.use('/api', router);
const PORT = 3001;
app.listen(PORT, function() {
    console.log("Server is running on port "+PORT);
});

Then, as I have said, I have a React JS application working as a Frontend:

apihelperdownload () {
  return axios.get(API_URL + "download").then(function (response) {
      return response;
  })
}

.............

function downloadFile() {
  apihelperdownload().then(
      (res) => {
          // Should I do something here with response?
      },
      (error) => {
          
      }
  )
  
}


<button className="download" onClick={() => downloadFile()}>
  Download File
</button>

I have two files on my server, one TXT and one JPG. Both have the correct path (I'm not getting any "file/path not found" error) and I am receiving a "200 status OK" in both cases... But I can't download the files.

Also:

In the JPG case, in Network Tab, on preview sub-Tab I can see the image (so the browser is receiving the image).

And the response looks like this:

(ignore the params and the different url, it's just that here is not simplified)

~~- In the TXT case, in Network Tab, on preview sub-Tab I can just see a white page.~~

And the response looks like this:

As you can see, in this second case (.txt file), the data is "empty" ( "" )
Data is the correct text.. I didn't save the txt file.. So it was empty..

I have checked several related questions like this Download a file from NodeJS Server using Express

But unfortunately, I haven't found how to solve my issue.

1) What am I doing wrong on the server-side?

2) What I have to do with the response on client-side?

Thanks

SpykeRel04D · Accepted Answer · 2020-11-13T15:51:10.003

I have found how to solve it without third-party libraries and in quite an "easy way".

First of all, I have changed the request to POST (since I just made GET because I thought it was the only way).

After that, on the Axios request, we have to indicate the responseType as blob:

function apihelperdownload () {
    return axios.post(API_URL + "download",{ key: 'value', headers: authHeader(), responseType: 'blob' }).then(function (response) {
        return response;
    })
}

Then, when we receive the response, we have to create an URL object as a Blob and a link element to download it.

function downloadFile(filename) {
  apihelperdownload().then(
      (res) => {
          const url = window.URL.createObjectURL(new Blob([res.data]));
          const link = document.createElement('a');
          link.href = url;
          if (typeof window.navigator.msSaveBlob === 'function') {
              window.navigator.msSaveBlob(
                  res.data,
                  filename
              );
          } else {
              link.setAttribute('download', filename);
              document.body.appendChild(link);
              link.click();
          }
      },
      (error) => {
          alert("Something went wrong");
      }
  )
  
}

With this, we can download almost any kind of file very easily.

score 1 · Answer 2 · answered Nov 12 '20 at 21:51

1

You can use js-file-download module.

const FileDownload = require('js-file-download');

Axios.get(API_URL + "download")
   .then((response) => {
        FileDownload(response.data, 'file.txt');
    });

Check this response for more: https://stackoverflow.com/a/41940307/6512445

answered Nov 12 '20 at 21:51

Skywolfmo

24
6

2

Thanks for your answer! It works but is quite difficult after that working with different formats than txt. I have found some documentation, and I will post it here when I'll be able to make it work fine! PS: Thanks again! – SpykeRel04D Nov 12 '20 at 22:37
my pdf errors out when attempting to view it, do you find anything @SpykeRel04D ? – conor909 Apr 29 '22 at 14:32

Downloading a file from a Node.JS API REST (express) with React.JS (Axios Get)

2 Answers2