I am currently designing a web app and part of it is supposed to download a ZIP file from an external API and pass it onto the end user. I’ve reviewed a ton of code surrounding how to download the ZIP file directly from the API and how to initiate a download of a file that exists locally on the server hosting the web app, but what we’d really like to achieve is for the end user to press “download” and the ZIP file from the API downloads directly onto the end user’s machine without first downloading it to the server.
The app is pretty simple–Python backend and React + Vite front end.
My current Python code is along the lines of this:
@app.get("/download-zip") async def download_zip(): response = requests.get(request_url, headers=headers) return ??
Now, I’ve already tested and confirmed I can download the ZIP file with this line of code:
open('file.zip', 'wb').write(response.content)
But, what I’d really like to do is simply return the content, headers, json, or whatever can be used by the frontend React app to initiate the download so the end user just presses a button and instantly downloads the ZIP file. Issue is that I am struggling to figure out what to return that will allow this. Especially since response.content does not seem to be returnable and response.text / response.headers do not seem to provide what is needed for the front end to initialize the download.
I have experimented with downloading the file from the backend then downloading the subsequent local ZIP from the front end, but my team is concerned about what might happen when multiple users are using the app and then a bunch of ZIP files collect within the public folder. Especially if there’s an issue in the ‘cleanup’ and the ZIP files don’t get properly deleted.
After many hours of testing and research, I’m struggling to find an adequate solution for this problem so any suggestions would be very much appreciated! Thanks in advance 🙂
In case it is of any help, here is what my React front end generically looks like as I’m testing (and yes, I know this won’t really work with what I’m trying to do right now even if I perfect the backend, but hopefully it helps give you an idea of what I’m trying to do!):
const getZip = async () => { const response = await fetch(${import.meta.env.BASE_URL}/download-doc ); await response.json().then(res => { console.log(res); var link = document.createElement('a'); link.setAttribute('download', res); link.href = res; link.target = '_blank'; document.body.appendChild(link); link.click(); link.remove(); }); };