Welcome folks today in this blog post we will be compressing multiple images and files using filesaver.js and jszip library. All the full source code of the application is given below with example.
Get Started
In order to get started you need to create an index.html
file and here in this block of code we are including the cdn
of filesaver.js, JSZip.js libraries as shown below
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSZip Compress Multiple Images & Files</title> </head> <body> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> </html> |
And now guys we will be writing the javascript code to compress the images
and text files into one zip file using jszip library. And then we will be downloading that file as an attachment using filesaver.js library.
Making Fetch API Request to Download Image
The very first step is to make a fetch api request to download the image and files using the fetch api
1 2 3 4 5 6 7 8 |
async function downloadData() { // Fetch the image and parse the response stream as a blob const imageBlob = await fetch('https://cdn.pixabay.com/photo/2022/09/28/05/53/squirrel-7484292__340.jpg').then(response => response.blob()); // create a new file from the blob object const imgData = new File([imageBlob], 'filename.jpg'); } |
Here you can see that we are using the async await syntax to make a fetch api get call to the image url and then the response is returned to us. And we are storing that inside the image blob variable. And then we are making the file from the blob object. And in the second argument we are giving the unique filename to the image which is downloaded
Initializing JSZip & Storing Text File in Zip File
1 2 3 |
// Copy-pasted from JSZip documentation var zip = new JSZip(); zip.file('Hello.txt', 'Hello World\n'); |
Here we are in the first line of the code we are initializing a new object of the JSZip constructor. And then we are storing the text file and compressing it into the zip
file.
Making Folder in Zip File
1 |
var img = zip.folder('images'); |
Now in this block of code we are making a new folder name as images
with the help of folder()
method inside the jszip library.
Inserting Image in Zip File
1 |
img.file('smile.jpg', imgData, { base64: true }); |
Here in this line of code we are using the file
method inside thar we are providing the filename of the image file and then we are providing the base64 code of the image and then in the third argument we are providing the base64 option to true.
Downloading Zip Files as an Attachment
1 2 3 |
zip.generateAsync({ type: 'blob' }).then(function (content) { saveAs(content, 'example.zip'); }); |
Here lastly in this block of code we are downloading the zip file as an attachment and also we are providing the type argument to blob. And in the callback function we are using the saveAs()
method to download the file as an attachment.
Full Source Code
Now wrapping it up we will show you the complete code required for this application as shown below
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSZip Compress Multiple Images & Files</title> </head> <body> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> <script> downloadData() async function downloadData() { // Fetch the image and parse the response stream as a blob const imageBlob = await fetch('https://cdn.pixabay.com/photo/2022/09/28/05/53/squirrel-7484292__340.jpg').then(response => response.blob()); // create a new file from the blob object const imgData = new File([imageBlob], 'filename.jpg'); // Copy-pasted from JSZip documentation var zip = new JSZip(); zip.file('Hello.txt', 'Hello World\n'); var img = zip.folder('images'); img.file('smile.jpg', imgData, { base64: true }); zip.generateAsync({ type: 'blob' }).then(function (content) { saveAs(content, 'example.zip'); }); } </script> </html> |