Give the file(s) to the user once fully downloaded

[artyuum]

For an application I'm making, the users will be able to download many files at once, by creating an archive on the fly (using client-zip). The problem is that once the user clicks on the download button, the download is ongoing, the zip is being created and the zip is being downloaded at the same time to their browser. The user might be tempted to close the tab, believing that the download will continue in background but it doesn't.

So my solution is to build something like Mega: display the progress in the page and only give the file to the user once fully downloaded (or once the archive fully created).

Currently, here is how my code looks like:

const zipStream = makeZip(responses);

await zipStream
    .pipeThrough(progress)
    .pipeTo(streamSaver.createWriteStream('files.zip'))
;

Thanks to pipeThrough I'm able to generate a progress bar. But I can't find a way to do all of that in the background while still storing the data into a Stream (to not hit memory limits) and then giving back the archive once it's fully created.

Do you have any ideas on how I can achieve that?