Download multiple files then compress to one zip file using JSZip & JSZip-utils

download-multiple-files.js

var zip = new JSZip();
var count = 0;
var zipFilename = "zipFilename.zip";
var urls = [
  'http://image-url-1',
  'http://image-url-2',
  'http://image-url-3'
];

urls.forEach(function(url){
  var filename = "filename";
  // loading a file and add it in a zip file
  JSZipUtils.getBinaryContent(url, function (err, data) {
     if(err) {
        throw err; // or handle the error
     }
     zip.file(filename, data, {binary:true});
     count++;
     if (count == urls.length) {
       zip.generateAsync({type:'blob'}).then(function(content) {
          saveAs(content, zipFilename);
       });
    }
  });
});

I'm facing cors issue, how can i solve that? for testing when i dessabled the web security then zip file properly got downloaded. so please suggest me how can i solve this cors error

in development mode you could add this to the beginning of the url https://cors-anywhere.herokuapp.com/ example https://cors-anywhere.herokuapp.com/https://myurl.com/myImage.com

but for production environment you should configure your server to accept this kind of connections with Access-Control-Allow-Origin from the server side.

What is saveAs function? Where it came from?

https://github.com/eligrey/FileSaver.js/

include this in your file after npm i save-as: import { saveAs } from 'save-as'

Note: each file needs an unique filename, otherwise the zip will contain only one file. Struggled with this for 2 hours lol. also, the filename needs to include the type. For me it is: zip.file(image+ ".jpg", data, {binary:true});

+1
I have also struggled with file name being redundant and i ended up with a zip with one file, i suggest adding something like self.crypto.randomUUID(); https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID to ensure uniqueness!