I have front-end with React and Node.js API.
In my Node.js I have simple route:
//get file
router.post("/download", (req, res) => {
return res.download(req.body.path);
});
I pass the path to my file directly from front-end and I return it with res.download().
In the fron-end, I have a button with this function:
onClick={async () => {
axios({
method: "post",
url: `${apiAddress}/project/download`,
header: {
Authorization:
"Basic " + localStorage.getItem("token"),
"Access-Control-Allow-Origin": "*",
},
//responseType: "blob",
data: {
path: `D:\evgeni\project-system\projects\${props.projectId}\offer\${props.data[0]}`,
},
})
.then((res) => {
console.log(res.data);
})
.catch((err) => console.log(err));
}}
With my data property I am passing the path to the folder (it is correct, don’t look into props I put there). Now in the .then() I receive my res.data.
Here is what I get when I console.log() it:
the file data by itself. If I use “js-file-download” package and make it like this:
fileDownload(res.data, `${name}.doc`);
It is working absolutely fine. Here is the problem – I have different types of files:
All of them are available with their full names in the backend (req.body.path can extract the full name from there + even the extension .doc for example). How I can send from backend to front-end file name or file format so I could be able to pass it for downloading ? Is it possible or are there any better ideas (even using blob which by the way is figuring out the format)?