How to Zip files using jszip library

Question

Am working on an offline application using HTML5 and jquery for mobile. i want to back up files from the local storage using jszip. below is a code snippet of what i have done...

  if (localStorageKeys.length > 0) {
            for (var i = 0; i < localStorageKeys.length; i++) {
                var key = localStorageKeys[i];
                if (key.search(_instrumentId) != -1) {                  
                        var data = localStorage.getItem(localStorageKeys[i])
                        var zip = new JSZip();
                        zip.file(localStorageKeys[i] + ".txt", data);
                        var datafile = document.getElementById('backupData');
                        datafile.download = "DataFiles.zip";
                        datafile.href = window.URL.createObjectURL(zip.generate({ type: "blob" }));                        
                }
                else {

                }


            }

        }

in the code above am looping through the localstorage content and saving ezch file in a text format. the challenge that am facing is how to create several text files inside DataFiles.zip as currently am only able to create one text file inside the zipped folder. Am new to javascript so bare with any ambiguity in my question. thanks in advance.

Answer 1

Just keep calling zip.file().

Look at the example from their documentation page (comments mine):

var zip = new JSZip();

// Add a text file with the contents "Hello World\n"
zip.file("Hello.txt", "Hello World\n");

// Add a another text file with the contents "Goodbye, cruel world\n"
zip.file("Goodbye.txt", "Goodbye, cruel world\n");

// Add a folder named "images"
var img = zip.folder("images");

// Add a file named "smile.gif" to that folder, from some Base64 data
img.file("smile.gif", imgData, {base64: true});

zip.generateAsync({type:"base64"}).then(function (content) {
     location.href="data:application/zip;base64," + content;
});

The important thing is to understand the code you've written - learn what each line does. If you do this, you'd realize that you just need to call zip.file() again to add another file.

Answer 2

If you receive a list of files ( from ui or array or whatever ) you can make a compress before and then archive. The code is something like this:

function upload(files){

    var zip = new JSZip();                       
    let archive = zip.folder("test");

    files.map(function(file){
        files.file(file.name, file.raw, {base64: true});
    }.bind(this));

    return archive.generateAsync({
        type: "blob",
        compression: "DEFLATE",
        compressionOptions: {
           level: 6
        }
    }).then(function(content){ 
        // send to server or whatever operation
    });
}

this worked for me at multiple json files. Maybe it helps.

Answer 3

Adding to @Jonathon Reinhart answer,
You could also set both file name and path at the same time

// create a file and a folder
zip.file("nested/hello.txt", "Hello World\n");
// same as
zip.folder("nested").file("hello.txt", "Hello World\n");

Answer 4

In case you want to zip files and need a base64 output, you can use the below code-

import * as JSZip from 'jszip'


var zip = new JSZip();
    zip.file("Hello.json", this.fileContent);
    zip.generateAsync({ type: "base64" }).then(function (content) {
      const base64Data = content