My current function downloads multiple images and saves them to a user's "download" folder, although it only works in Chrome.
I am looking to enhance this function by combining the downloaded images into a single zip file.
Below is my existing code. I aim to integrate this with the JSZip API that I came across online at this link.
I have already installed the JSZip API using bower and included the script in my HTML.
The code below successfully downloads multiple individual images:
$scope.downloadPhotos = function() {
var photoUrls = [];
for (var x = 0; x < $scope.$parent.photos.length; x++) {
var p = $scope.$parent.photos[x];
if (p.isChecked) {
photoUrls.push($scope.bucketUrl() + p.photoUrl);
}
}
saveImage(photoUrls);
};
/*----this function saveImage works great (only Chrome)-----*/
function saveImage(urls) {
var link = document.createElement('a');
link.setAttribute('download', null);
link.style.display = 'none';
document.body.appendChild(link);
for (var i = 0; i < urls.length; i++) {
link.setAttribute('href', urls[i]);
link.click();
}
document.body.removeChild(link);
}
Here is an example of the JSZip API code to create a zip file with content:
function create_zip() {
var zip = new JSZip();
zip.add("hello1.txt", "Hello First World\n");
zip.add("hello2.txt", "Hello Second World\n");
content = zip.generate();
location.href = "data:application/zip;base64," + content;
}
Now, I’m inquiring about how to merge these two functionalities to place my images into a zipfile. Thank you for your assistance!