How to get a Firebase Storage file bytes/blob with download URL and zip it using JSZip?

Question

For example using JSZip:

zip.file(/*get firebase storage file using url */);
    zip.generateAsync({type:"blob"})
    .then(function (blob) {
       FileSaver.saveAs(blob, "hello.zip");
 });

Any ideas on how to go about this ?

Answer 1

The Download Files on Web shows how to download a file and how to configure CORS (mandatory to download data directly in the browser).

JSZip supports promises as content: you can wrap each async download into a promise.

// raw xhr, fetch, or your favorite ajax library
// just remember, you want:
// - to download **binary** data (jQuery's $.ajax won't work out of the box for example)
// - to return a promise of the content
function downloadUrlAsPromise (url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = "blob";
    xhr.onreadystatechange = function(evt) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.response);
        } else {
          reject(new Error("Ajax error for " + url + ": " + xhr.status));
        }
      }
    });
    xhr.send();
  });
}

// now, we can link firebase and JSZip:
var path = "images/stars.jpg";
var contentP = storageRef.child(path).getDownloadURL().then(downloadUrlAsPromise);
zip.file(path, contentP);