Derivv Technical Breakdown: Packaging Files for Delivery

March 1, 2021

After the images are processed and the user has refined the focal point, it’s time to download the images. The user has the option to download a zip file of all the images or download them one by one.

This is achieved by using JSZip to package the images into a zip file and then saving the file to the user’s computer using file-saver.

const zip = new JSZip()
const folderName = `${images[0].originalName}-derivatives`;
const folder = zip.folder(folderName);

images.forEach((image) => {
  const fileName = `${image.name}.${image.extension}`
  folder.file(fileName, image.blob)
});

zip.generateAsync({type: 'blob'})
  .then((content) => {
    saveAs(content, `${folderName}.zip`)
  });

And that’s essentially it folks. Thanks for reading!

Previous: What Makes the Interface So Unique?

Derivv Technical Breakdown Overview