How To Zip Multiple Files In Javascript

by

Zipping multiple files is a common task when working with various projects. In this blog post, we’ll learn how to zip multiple files using JavaScript. We will be using the jszip library, which is a popular and easy-to-use library to create, read, and edit .zip files with JavaScript.

Getting Started

First, you need to include the jszip library in your project. You can do this by installing it via npm or by including a script tag with the library’s URL.

To install via npm, run the following command:


npm install jszip

If you prefer to include a script tag, add the following to your HTML file:


<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>

Now that we have the library included, let’s see how to zip multiple files using JavaScript.

Zipping Multiple Files

In this example, we’ll create a zip file containing two text files. To do this, follow these steps:

  1. Create a new instance of the JSZip class.
  2. Add files to the zip using the file method.
  3. Generate the zip file using the generateAsync method.
  4. Save the generated zip file using a method of your choice (e.g., create a download link).

Here’s the complete code for our example: 

        <script>
            // Create a new instance of JSZip
            const zip = new JSZip();

            // Add files to the zip
            zip.file('file1.txt', 'This is the content of file1.');
            zip.file('file2.txt', 'This is the content of file2.');

            // Generate the zip file
            zip.generateAsync({ type: 'blob' }).then(function (content) {
                // Save the generated zip file
                const a = document.createElement('a');
                const url = URL.createObjectURL(content);
                a.href = url;
                a.download = 'myFiles.zip';
                a.click();
                URL.revokeObjectURL(url);
            });
        </script>

With this code, when the script runs, a zip file named myFiles.zip containing the two text files will be automatically downloaded.

Conclusion

In this blog post, we learned how to zip multiple files using JavaScript and the jszip library. This library makes it easy to create, read, and edit .zip files with just a few lines of code. Now you can efficiently compress and package your files using JavaScript!