0

I have stored the file after uploading it to the downloads folder in my project directory. I want to download that saved file from the frontend. When I click on the download button, it doesn't fetch the file.

alt text

And when I go to http://localhost:5000/download on the express app, I got this error message

Error: Can't set headers after they are sent.

Express Server Code:

app.get('/download', (req, res) => {
    res.send('file downloaded')
    const file = './downloads/output.yml';
    res.download(file, 'openapi.yml', (err) => {
        if (err) {
            console.log(err)
        } else {
            console.log('file downloaded')
        }
    });
});

Frontend App code:

HTML:

<button class="download-btn">download</button>

Script:

const handleDownload = async () => {
    const res = await fetch("https://cors-anywhere.herokuapp.com/http://localhost:5000/download");
    const blob = await res.blob();
    download(blob, 'output.yml');
}

downloadBtn.addEventListener('click', handleDownload);

Folder Structure:

alt text

Update: Server.js

const uploadFiles = async (req, res) => {
    const file = await req.files[0];
    console.log(file)
    postmanCollection = file.path;
    outputFile = `downloads/${file.filename}.yml`
    convertCollection();
    res.json({ message: "Successfully uploaded files" });
}

app.post("/upload_files", upload.array("files"), uploadFiles);

Anyone please help me with this.

r121
  • 2,478
  • 8
  • 25
  • 44

1 Answers1

0

You are already using res.send ,which sends the response headers back to client ,which ends the request response cycle ,and when you try to do res.download it throws error. Use instead

 app.get('/download', (req, res) => {
      const file = './downloads/output.yml';
        res.download(file, 'openapi.yml', (err) => {
            if (err) {
                console.log(err)
            } else {
                console.log('file downloaded')
            }
        });
    });

res.send('file downloaded')--->remove this line

You need to update your js code as well

const handleDownload = async () => {
    const res = await fetch("https://cors-anywhere.herokuapp.com/download"); //http://localhost:5000--->this is not required
    const blob = await res.blob();
    download(blob, 'output.yml');
}

downloadBtn.addEventListener('click', handleDownload);
Shubham Dixit
  • 9,242
  • 4
  • 27
  • 46
  • Hello there, Thanks for your help Now I am able to download the file when I hit http://localhost:5000/download this. But when I click on the download button on the frontend it still shows a same error message and downloading an empty file script.js:24 GET https://cors-anywhere.herokuapp.com/http://localhost:5000/download 403 (Forbidden) – r121 Apr 05 '21 at 07:28
  • Now, it's showing this error message on the frontend "Failed to load resource: the server responded with a status of 403 (Forbidden)" and this error message on the backend "node:19280) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'path' of undefined" – r121 Apr 05 '21 at 07:35
  • I cant see `path` anywhere in your question please update the question – Shubham Dixit Apr 05 '21 at 07:37
  • That's a part of upload process , you should see this -https://stackoverflow.com/questions/35851660/multer-req-file-always-undefined – Shubham Dixit Apr 05 '21 at 07:41
  • I don't know why It's calling the upload route – r121 Apr 05 '21 at 07:42
  • At the time of uploading it's not showing an error message, but at the time downloading it's showing an error message – r121 Apr 05 '21 at 07:43