How To Create Zip File Using Jquery

by

In this blog post, we will explore how to create a zip file using jQuery and a third-party library called JSZip. The JSZip library is a popular JavaScript library for working with zip files. It provides a simple and easy-to-use API for creating, reading, and editing zip files.

Prerequisites

To follow along with this tutorial, you need to have basic knowledge of HTML, JavaScript, and jQuery. You also need to include the jQuery library and JSZip library in your project.

Download and Include JSZip Library

You can download the JSZip library from its official website: https://stuk.github.io/jszip/. Download the latest version and include it in your project.

Include jQuery Library

Add the jQuery library to your project by either downloading it from the official website https://jquery.com/ or linking to it directly from a CDN (Content Delivery Network) such as Google or Microsoft:

Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Microsoft CDN:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

Creating a Zip File

Let’s create a simple example where a user can upload multiple images and then download them as a zip file. We will use the FileReader API to read the uploaded files, and the JSZip library to create the zip file.

Step 1: Create an HTML Form

Create an HTML form with a file input field for uploading multiple images. Also, add a button to trigger the zip file creation and download:

<form id="uploadForm">
    <input type="file" id="images" name="images" accept=".jpg,.jpeg,.png" multiple>
    <button type="button" id="downloadZip">Download images as zip</button>
</form>

Step 2: Add JavaScript/jQuery Code

Now, let’s add the JavaScript/jQuery code to handle the file upload, create the zip file, and download it.

<script>
    $(document).ready(function() {
        $("#downloadZip").click(function() {
            var zip = new JSZip();
            var imgFolder = zip.folder("images");
            var files = $("#images")[0].files;

            if (files.length === 0) {
                alert("Please upload at least one image.");
                return;
            }

            var fileReadPromises = [];

            $.each(files, function(index, file) {
                var fileReadPromise = new Promise(function(resolve, reject) {
                    var fileReader = new FileReader();
                    fileReader.onload = function(e) {
                        imgFolder.file(file.name, e.target.result, { base64: true });
                        resolve();
                    };
                    fileReader.readAsDataURL(file);
                });

                fileReadPromises.push(fileReadPromise);
            });

            Promise.all(fileReadPromises).then(function() {
                zip.generateAsync({ type: "blob" }).then(function(content) {
                    saveAs(content, "images.zip");
                });
            });
        });
    });
</script>

Explanation

Here is a brief explanation of the code:

  1. Create a new instance of the JSZip object.
  2. Create a folder named “images” inside the zip file.
  3. Use the FileReader API to read each uploaded image file as a Data URL (Base64 encoded).
  4. Add each image file to the “images” folder in the zip file.
  5. When all image files have been read and added to the zip file, generate the zip file as a Blob.
  6. Use the saveAs function (provided by JSZip) to trigger the download of the zip file.

That’s it! Now you can create and download zip files using jQuery and the JSZip library. Feel free to modify the example according to your needs.