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.

Pause

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.

Entrepreneur

@Jonathon...Thanks a lot..it worked perfectly.you have explained it to me like i was a two year old baby and am contented.thanks again – Pause

What are you storing in the variable imgData? Because I'm trying to achieve the same result but writing an mp3 into it. – Incarnate

@EduardoLaHozMiranda In this case, it would be a raw GIF image, Base64 encoded. You want to use the first form, which is just the raw string data. – Entrepreneur

Answer 2

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");

Radbourne

Answer 3

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.

Equilibrist

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

Lenni