Geek Answers Handbook

Upload multiple images to a single zip file

I have a function that currently uploads several images and saves them to a user’s download folder (works only in Chrome)

I want to transfer this function to the next step and put these images in one zip file.

Below is an example of my current code. I want to combine my code with the JSZip API, which I found here .

I already installed bower for this JSZip API and included the script in my html.

Here is my code that works great when loading multiple images at once:

$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); }

And here is a sample JSZip API code for creating a zip file with the contents in it:

 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 just wondering how to combine these two images into a zip file. Thanks for your help!

+7
source share
4 answers

To upload multiple files in Zip format, we can use jsZip and FileSaver.js, or if we use the Web API and Angularjs, then we can create an API method to create an archive on a zip archive on the server, and then in angularjs we can use $ http post or get an api call to download the file as a zip file (we must use the file manager to save the file in zip format). eg -

api call in angularjs -

 function downloadFiles(files) { return $http.post(baseUrl + 'api/download/files', files, { responseType: 'arraybuffer' }); }

call the function above and when using the answer use the fileSaver.js save method. How to save the file in zip format, for example -

 //files - array input of files like http://www.example.com/file1.png', 'http://www.example.com/file2.jpeg', 'http://www.example.com/file3.jpg']; downloadFiles(files).then(function (response) { //on success var file = new Blob([response.data], { type: 'application/zip' }); saveAs(file, 'example.zip'); }, function (error) { //on error //write your code to handle error });
+3
source

You should see this example . For now, you just ask the browser to start downloading the file. If you want to create the client part of the zip file, your js code must access the contents of the files using ajax calls (you will get CORS problems if they are not stored on the same server).

Without copying / pasting all the code, example:

  • runs ajax calls ( JSZipUtils , but you can easily use responseType = "arraybuffer" if you only support the latest browsers)
  • wrap them in promises (jQuery promises are here, but you can use your own)
  • add result to zip object
  • wait for all promises to complete before starting the download
+2
source 
 function downloadImageAsZip(imageUrl){ var zip = new JSZip(); var img = new Image(); img.crossOrigin = 'Anonymous'; img.src = imageUrl; img.onload = function() { $scope.count2++; var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var dataURL; canvas.height = img.height; canvas.width = img.width; ctx.drawImage(this, 0, 0); ctx.enabled = false; dataURL = canvas.toDataURL("Canvas"); canvas = null; //var base64String = dataURL.replace("/^data:image\/(png|jpg);base64,/", ""); var base64String = dataURL.replace("data:image/png;base64,", ""); zip.file("ImageName", base64String, {base64: true}); zip.generateAsync({type:"blob"}).then(function(content) { saveAs(content, "ZipFileName.zip"); }); } }
+2
source

I put this together, which will allow you to archive an array of image URLs.

https://jsfiddle.net/jaitsujin/zrdgsjht/

You can control the structure of zip folders by changing this line

 filename = filename.replace(/[\/\*\|\:\<\>\?\"\\]/gi, '').replace("httpsi.imgur.com","");
0
source

More articles:


All Articles