Imagine this scenario where there is a gallery of images showing up on your website and you want the user to be able to select multiple images and download them as a zip file. How would you go about implementing it?
Firstly, we will have to fetch the images that are to be downloaded. We will be using browsers Fetch API to achieve that. Simple Enough?
const imageUrl = 'https://images.unsplash.com/photo-1576328842079-95ef7deedc89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80.jpg';
// Fetch the image and parse the response stream as a blob
const imageBlob = fetch(imageUrl).then(response => response.blob());
// create a new file from the blob object
const imageFile = new File([imageBlob], "filename.jpg");
Everything goes great until you stumble upon this CORS error.
To solve this you need to change the s3 bucket CORS settings. Add this to the CORS Configuration file.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Alright! going back to creating the zip file. We are going to use a npm package called JSZip which will be responsible for generating a zip, and another one called file Saver that will trigger the download file for us.
import JSZip from "jszip";
import { saveAs } from 'file-saver';
/* Create a new instance of JSZip and a folder named 'collection' where*/
/* we will be adding all of our files*/
let zip = new JSZip();
let folder = zip.folder('collection');
/* Add the image to the folder */
folder.file(`${name}.jpg`, fileImg);
/* Generate a zip file asynchronously and trigger the download */
folder.generateAsync({ type: "blob" }).then(content => saveAs(content, "files"));
And we are done. If you wanted to add multiple images then you could loop over the urls, fetch the image add it to the folder and finally generate a zip file.
Top comments (0)