Javascript JSZip Example to Compress Multiple Images & Files Using Filesaver.js Library in Browser

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

<!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>

<!DOCTYPE html>

<head>

<title>JSZip Compress Multiple Images & Files</title>

</head>

<body>

</body>

</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

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

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

 // Copy-pasted from JSZip documentation
var zip = new JSZip();
zip.file('Hello.txt', 'Hello World\n');

// 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

var img = zip.folder('images');

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

 img.file('smile.jpg', imgData, { base64: true });

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

zip.generateAsync({ type: 'blob' }).then(function (content) {
      saveAs(content, 'example.zip');
});

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

<!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>