Express + React | Googleapis - download a file - reactjs

Question

Im so new on React components and I try to download files from my google drive folder, after a long time currently I have working my API to upload, and get files. My question is, how should I pass the data to download the file on my front end?
How can I get the files from my google drive, and download on react component?
Thanks in advance, and sorry for my explication, I dont know what I currently doing with the file.
Note: This code is just as example to download an image, I want to pass a fileID to download anything, pdfs, docs, png, etc.
Update: After triying differents solutions my api function was completed like this:
google_Ctrl.getDownload = async(req, res) => {
console.log(req.params);
let Google = await drive.files.get(
{fileId: req.params.id,
alt: 'media'},
{ responseType: 'stream' }
).then((request) => {
console.log(request);
fileType = request.headers['content-type'];
fileName = ( "file" + '.' + fileType );
fileData = request.data;
res.set(request.headers)
// res.set("Content-Type", fileType);
// res.set("Content-Disposition", "attachment; filename='archivo.png'");
fileData.pipe(res)
});
}
My function its currently working, when I using api.rest to send a GET Request they provide me my files. But now my problem is on React Component, I read a lot of posts but I did not found the solution, I currently using downloadjs trying this solution, unsuccessfully.
const DownloadFile = () => {
axios.get(process.env.REACT_APP_API_URL + 'google/download/' + "1YtDWD9hNEgCUi8YGQPjV98sULhyM5m8C")
.then((res) => {
console.log(res);
// res.blob()
// fileDownload(res.data, 'filename.png');
download(res.data, "file.png", res.headers['content-type']);
}).catch((error) =>{
console.error(error);
message.error('upload failed.');
});
}
This is my download function on React component, my .txt files works, but when I try to download pdf's, docs, xlsx, etc, dosent work, what can I do?
With Api.rest I tested my api function and it's working, I can download my files from api.rest, but my react functions apparently its badly formatted, I guess.

Answer 1

Okey, after a long time checking the code I found my error on the React Function, if someone is in the same position, here the code working:
API Google:
google_Ctrl.getDownload = async(req, res) => {
console.log(req.params);
console.log(req.body);
let Google = await drive.files.get(
{fileId: req.params.id,
alt: 'media'},
{ responseType: 'stream' }
).then((request) => {
console.log(request);
fileType = request.headers['content-type'];
fileName = ( "file" + '.' + fileType );
fileData = request.data;
// res.set(request.headers)
console.log(fileType);
res.set("Content-Type", fileType);
res.set("Content-Disposition", "attachment; filename='archivo.png'");
fileData.pipe(res)
});
}
React Component:
const DownloadFile = () => {
axios.get(process.env.REACT_APP_API_URL + 'google/download/' + "1YtDWD9hNEgCUi8YGQPjV98sULhyM5m8C",
{responseType: 'blob'})
.then((res) => {
console.log(res);
// res.blob()
fileDownload(res.data, 'filename.png');
// download(res.data, "file.pdf", res.headers['content-type']);
}).catch((error) =>{
console.error(error);
message.error('upload failed.');
});
}
The next step is send the FileID, Filename with the extention and when you recive use that name/extension to save correctly the file :D.