Possible to start download immediately?

[coleshaw]

Hello, I am wondering if it is possible to prompt the user for a file name, start the download immediately, and then stream the chunks to the client, instead of waiting for all the blobs to be assembled? Our users can potentially zip up multiple GB's of files (each file can itself be GBs), and it would be nice UX if they could see the download progress instead of waiting for the zip to be assembled. I was able to achieve this type of behavior with an older library (no longer maintained) that used service workers, so not sure if that is a limitation that affects this?

Example code below. With this code, the user doesn't get prompted for a file name or download location until all the files have been downloaded to memory and the final blob assembled. With large files, they could be waiting for awhile with no indication that something is happening in the background.

export const downloadFilesZip =
  ({folder_name = '', files = [], bucket_name = ''}) =>
  async (dispatch) => {
    async function addFiles(files, writer) {
      for (const file of files) {
        const {download_url, file_path} = file;
        const httpReader = new HttpRangeReader(download_url);
        await writer.add(file_path, httpReader);
      }
    }

    let folderParts = folder_name.split('/');
    if (!folder_name) folderParts = [bucket_name];

    const zipFileWriter = new TransformStream();
    const zipFileBlobPromise = new Response(zipFileWriter.readable).blob();

    const zipWriter = new ZipWriter(zipFileWriter, {
      zip64: true,
      level: 0
    });
    const zipName = folderParts.join('--');

    await addFiles(files, zipWriter);

    await zipWriter.close();

    return zipFileBlobPromise.then((blob) => {
      const anchorElement = document.createElement('a');
      anchorElement.href = URL.createObjectURL(blob);
      anchorElement.download = `${zipName}.zip`;
      anchorElement.click();

      setTimeout(function () {
        anchorElement.remove();
      }, 0);
    });

Thanks for your help and any suggestions!

[gildas-lormeau]

Actually, you could maybe integrate zip.js in a service worker as well. There is an example of service worker code here: https://github.com/gildas-lormeau/zip.js/blob/master/tests/all/test-sw-worker.js (and here https://github.com/gildas-lormeau/zip.js/blob/master/tests/all/test-sw.js for the launcher).

[coleshaw]

Ah okay, so perhaps the "magic" to making that download appear immediately is the service worker? I wasn't sure, but that seems like the main difference in approaches -- thanks, I will give that a shot!

[gildas-lormeau]

Yes, I confirm this approach works. I did a test with these scripts.

main.js

await navigator.serviceWorker.register("sw.js");
await navigator.serviceWorker.ready;
const anchorElement = document.createElement("a");
anchorElement.href = "test.zip";
anchorElement.textContent = "download";
document.body.appendChild(anchorElement);

sw.js

importScripts("./dist/zip.js");
self.addEventListener("fetch", event => {
  if (event.request.url.match(/test\.zip$/)) {
    const transformStream = new TransformStream();
    const zipWriter = new zip.ZipWriter(transformStream);
    event.respondWith(new Response(transformStream.readable));
    addFiles(zipWriter).catch(error => console.error(error));
  }
});

async function addFiles(zipWriter) {
  await zipWriter.add("test1", new zip.Uint8ArrayReader(new Uint8Array(1024 * 1024 * 64)), { level: 0 });
  // you can put a breakpoint here to verify the "save as" popup is displayed before the zip file is closed
  await zipWriter.add("test2", new zip.Uint8ArrayReader(new Uint8Array(1024 * 1024 * 64)), { level: 0 });
  await zipWriter.close();
}

The proper handling of the service worker lifecycle and errors is left as an exercise to the reader.

Note that you should not need to set zip64 to true explicitly, zip.js should be able to create zip64 entries automatically when necessary.

[coleshaw]

Ah neat!! Thank you -- I haven't had time to circle back to this, but this is super helpful!! 💯

[gildas-lormeau]

You're welcome! BTW, showSaveFilePicker might also help to achieve this in a simpler way, I guess. However it only works in Chromium-based browsers today.