Express + React | Googleapis - download a file

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.