Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on October 2, 2022

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

 

 

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

 

 

 

Recent Posts

  • Node.js Tutorial to Parse & Extract Text & Tables From PDF Document Using pdfreader Library in Javascript
  • Node.js Express Project to Stream Local MP4 Video in Webpage Using Fetch API in Javascript
  • Node.js Express Tutorial to Read & Write Stream of Data From Buffer to Server Using Pipes in Browser
  • Node.js PDFKit Example to Export Excel File to PDF Document Using ExcelJS Library
  • Python 3 Openpyxl Script to Export Excel (.XLSX) File to PDF Document Using ReportLab Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme