Need code of create zip download with large image size files

[sannysoni123]

Hi All,
I am checking this library showing extreme use of compression and decompression zip functionality. i want simple zip generate download option for number of files. please guide me for this.

Regards,
Sanny Soni (Web Developer)

[101arrowz]

In what form are your files? If they are Blob objects:

import { zipSync } from 'fflate';

const downloadZip = async () => {
  // As long as these are Blob objects it is fine
  const image1Blob = new Blob([pngData], { type: 'image/png' });
  const image2Blob = new Blob([jpgData], { type: 'image/jpeg' });
  const zip = zipSync({
    // Ultimately the input should be Uint8Array
    // If you don't have Blob objects, find some other way to make the data Uint8Array
    'image1.png': new Uint8Array(await image1Blob.arrayBuffer()),
    'image2.jpeg': new Uint8Array(await image2Blob.arrayBuffer())
  }, { level: 0 });
  // Level 0 disables compression
  
  // Temporary URL that contains blob
  const url = URL.createObjectURL(new Blob([zip]));
  const fakeLink = document.createElement('a');
  fakeLink.href = url;
  fakeLink.download = 'filename.zip';
  // Download the ZIP file automatically
  fakeLink.click();
  URL.revokeObjectURL(url);
}

If you're looking for maximum performance or are streaming the files (e.g. downloading multiple images and creating a ZIP from them as you download), read the documentation in the README and the wiki.

[sannysoni123]

files having with urls not blob image on that case what will have to do ?
i am consider to get data from url now what exactly passing in zipSync something like --

 let zip;
mediaFiles.forEach(file => {
            this.getFileFromUrl(file.url).subscribe(async (data: any) => {
                // As long as these are Blob objects it is fine
                var downloadURL = window.URL.createObjectURL(data);
                const image1Blob = new Blob([downloadURL], { type: data.type });
                zip = fflate.zipSync({
                    // Ultimately the input should be Uint8Array
                    // If you don't have Blob objects, find some other way to make the data Uint8Array
                    'test-1.pdf': new Uint8Array(await image1Blob.arrayBuffer()),
                }, { level: 0 });
                // Level 0 disables compression
            });
        });
        // Temporary URL that contains blob
        const url = URL.createObjectURL(new Blob([zip]));
        const fakeLink = document.createElement('a');
        fakeLink.href = url;
        fakeLink.download = `${zipName}.zip`;
        // Download the ZIP file automatically
        fakeLink.click();
        URL.revokeObjectURL(url);

is it okay ? because getting "An error occurred while loading the archive."

[101arrowz]

If you want all the images in the same ZIP:

Promise.all(mediaFiles.map(file => new Promise(resolve => {
  this.getFileFromUrl(file.url).subscribe(async (data: any) => {
    // Replace the filename variable with the actual name of each file
    // Maybe it's in the "file" variable? If so you would write:
    // const filename = file.name;
    const filename = 'file' + Math.random() + '.pdf';
    resolve([filename, new Uint8Array(await data.arrayBuffer())]);
  });
}))).then(files => {
  const zip = zipSync(Object.fromEntries(files), {level:0});

  const url = URL.createObjectURL(new Blob([zip]));
  const fakeLink = document.createElement('a');
  fakeLink.href = url;
  fakeLink.download = 'filename.zip';
  fakeLink.click();
  URL.revokeObjectURL(url);
});

[sannysoni123]

Thank you for the library and your help. @101arrowz