[Fixed] Downloading a zip file from a given path in express api + react


So I’m completely lost at this point. I have had a mixture of success and failure but I can’t for the life of me get this working. So I’m building up a zip file and storing it in a folder structure that’s based on uploadRequestIds and that all works fine. I’m fairly new to the node but all I want is to take the file that was built up which is completely valid and works if you open it once it’s been constructed in the backend and then send that on to the client.

const prepareRequestForDownload = (dirToStoreRequestData, requestId) => {
  const output = fs.createWriteStream(dirToStoreRequestData + `/Content-${requestId}.zip`);
  const zip = archiver('zip', { zlib: { level: 9 } });
  output.on('close', () => { console.log('archiver has been finalized.'); });
  zip.on('error', (err) => { throw err; });
  zip.directory(dirToStoreRequestData, false);

This is My function that builds up a zip file from all the files in a given directory and then stores it in said directory.

all I thought I would need to do is set some headers to have an attachment disposition type and create a read stream of the zip file into the res.send function and then react would be able to save the content. but that just doesn’t seem to be the case. How should this be handled on both the API side from reading the zip and sending to the react side of receiving the response and the file auto-downloading/requesting a user saves the file.

This is what the temp structure looks like

enter image description here


There is some strategies to resolve it, all browser when you redirect to URL where extension ending with .zip, normally start downloading. What you can do is to return to your client the path for download something like that.


and then you can use:

window.open('URL here','_blank')

Leave a Reply

(*) Required, Your email will not be published