Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Create Zip Files with JavaScript

By David Walsh on August 29, 2017

While we're doing amazing things with JavaScript on the server side, it's important not to take our eyes off of some of the great stuff happening on the client side. One such awesome project I recently discovered was JSZip: a JavaScript library that allows you to easily generate ZIP files from the front-end. And why is that useful? You can allow users to select and download images from a gallery or just about anything else. Let's have a look at how JSZip allows you to generate structured Zip files from the client side!

Start by grabbing the JSZip library , which happens to work in all major browsers. Once the library is available within the page, generating a Zip file is really just a few lines of code:

var zip = new JSZip();

// Add an top-level, arbitrary text file with contents
zip.file("Hello.txt", "Hello World\n");

// Generate a directory within the Zip file structure
var img = zip.folder("images");

// Add a file to the directory, in this case an image with data URI as contents
img.file("smile.gif", imgData, {base64: true});

// Generate the zip file asynchronously
zip.generateAsync({type:"blob"})
.then(function(content) {
    // Force down of the Zip file
    saveAs(content, "archive.zip");
});

You can add individual files with custom names and contents, as well as arbitrary directories. Once your contents are added, JSZip can asynchronously generate your Zip file and you can subsequently trigger download.

You can also load and read Zip files:

var read_zip = new JSZip();
// Load zip content; you'd use fetch to get the content
read_zip.loadAsync(content)
.then(function(zip) {
    // Read from the zip file!
    read_zip.file("hello.txt").async("string"); // a promise of "Hello World\n"
});

I really appreciate JSZip's simplicity. There are more advanced and complicated libraries available, like zip.js, but JSZip will likely cover most use cases. One great example of taking advantage of Zip files on the client side is in the Service Worker Cookbook: cache a Zip file locally, extract its contents, and serve within a service worker. Whatever your use case, know that Zip files can be read and generated without any need for a server!

Recent Features

By David WalshSeptember 3, 2014
Create a CSS Flipping Animation
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
By David WalshOctober 7, 2019
Interview with a Pornhub Web Developer
Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

Incredible Demos

By David WalshMarch 18, 2009
MooTools, mediaboxAdvanced, and Mexico
The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...
By David WalshAugust 24, 2009
Styling CSS Print Page Breaks
It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on the page. During the development of my...

Discussion

Andrew Wooldridge
Thank you so much for this! I am creating a web based RPG maker, and I needed a way to create zip archives. This is perfect!
Steve Fu
May I know if this solution works in Mobile / Tablet App?

Astro

Hi, thanks for your article.

Your missing one point, the saveAs function.

Either, you can use FileSaver.js if you work with NodeJS (server side) mentionned in https://stuk.github.io/jszip/

Or you can use the following function if you work on the client side only:

function saveAs(blob, filename) {
  if (typeof navigator.msSaveOrOpenBlob !== 'undefined') {
    return navigator.msSaveOrOpenBlob(blob, fileName);
  } else if (typeof navigator.msSaveBlob !== 'undefined') {
    return navigator.msSaveBlob(blob, fileName);
  } else {
    var elem = window.document.createElement('a');
    elem.href = window.URL.createObjectURL(blob);
    elem.download = filename;
    elem.style = 'display:none;opacity:0;color:transparent;';
    (document.body || document.documentElement).appendChild(elem);
    if (typeof elem.click === 'function') {
      elem.click();
    } else {
      elem.target = '_blank';
      elem.dispatchEvent(new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true
      }));
    }
    URL.revokeObjectURL(elem.href);
  }
}

Gabriel
What is ‘imgData’? how I can get this?
Ben Nadel
This is _really cool_! I’m so excited to find out that the client-side code can now handle all these interesting little use-cases. I’m planning to combine this technique with html2canvas() to generate PNG files on the client and then Zip them together. What a wonderful time to be alive!
Souvik
How can I tweak this such that instead of downloading zip, I can just create the zip and send it to a server through ajax?
Jerry
From what I can tell imgData is a placeholder for a string of text that can be found inside image files. Getting a file to open up and give us that string is the problem.
```
img.file('image.jpg', fs.readFileSync('image.jpg'));
```
This might work if you have nodeJS installed on the server, but that involves installing something on the server. Is there a way to keep it all on the client side? That would be nice.

Create Zip Files with JavaScript

Recent Features

Create a CSS Flipping Animation

Interview with a Pornhub Web Developer

Incredible Demos

MooTools, mediaboxAdvanced, and Mexico

Styling CSS Print Page Breaks

Discussion