I am trying to download a file which is placed on my local server. Path is localhost:8080/uploads/filname. I have used multer to store a file in my uploads folder. Saved the file details in Database..I am requesting the endpoint from react using fetch Api..
Below is my backend code which will download the file.
app.get('/download/uploads/:filename', function(req, res){
console.log("inside Download")
console.log(req.params.filename)
const file =`./uploads/${req.params.filename}`;
const filename = path.basename(file);
const mimetype = mime.lookup(file);
res.setHeader("Access-Control-Allow-Origin", "*",'Content-disposition', 'attachment;filename=' + filename);
res.setHeader('Content-type', mimetype);
const filestream = fs.createReadStream(file);
filestream.pipe(res);
});
Below is my fetchApi call from react to node server.This fetch is called on download button onClick.
fetch(`http://localhost:8080/download/uploads/${name}`,{method:"GET"})
Below is the UI to download a file..
When I click the download button in my UI the request goes to the backend but the image does not get downloaded and this is what i see in my network response.The response is highlighted.
When I directly hit the download endpoint by typing
localhost:8080/download/uploads/sample.pdf
I am able to download the file.What is wrong with the request made from the frontend to the backend to download the file.?
