Extracting zipped files using JSZIP in javascript

Question

In my webpage, a user is supposed to upload a zipped file. Within the zipped file are 2 files: another zip file and a txt file. On my server, after receiving the zip, I want to

Answer 1

This answer is cordova-plugin-file specific.

As stated in the docs:

Directory entries have to be created successively. For example, the call fs.root.getDirectory('dir1/dir2', {create:true}, successCallback, errorCallback) will fail if dir1 did not exist.

I am almost certain that the currently accepted answer cannot guarantee that file content/folders are always retrieved in the same order. This could result in problems with an API such as cordova-plugin-file. Especially when you invoke another async function to asynchronously create the directory on the filesystem.

You may want to filter the directories of your zip archive first and create them in a sync manner before continuing to extract other files as already answered:

const directoryNames = Object.keys(zip.files).filter(name => zip.files[name].dir);
for (const directoryName of directoryNames) {
    await this.createDirectory(directoryName, dirEntry);
}
// ...

private createDirectory = (dirName: string, dirEntry: DirectoryEntry) => {
    const promise = new Promise<DirectoryEntry>(resolve, reject) => {
        dirEntry.getDirectory(dirName, { create: true }, dirEntry => {
            resolve(dirEntry);
        }, fileError => reject(fileError));
    });
    return promise;
}

Answer 2

This is a working version I am using:

var jsZip = require('jszip')
jsZip.loadAsync(file).then(function (zip) {
  Object.keys(zip.files).forEach(function (filename) {
    zip.files[filename].async('string').then(function (fileData) {
      console.log(fileData) // These are your file contents      
    })
  })
})

You can get most of the information you need from http://stuk.github.io/jszip/documentation/examples.html but it's a little hard to get in one place, you have to look around a bit.

Answer 3

It took a bit of digging in their documentation but they have an example that shows how to read the file contents from a ZIP.

You are getting the object that describes the ZIP contents but not the actual content. Here is an adjusted version:

var JSZip = require('JSZip');

fs.readFile(filePath, function(err, data) {
    if (!err) {
        var zip = new JSZip();
        zip.loadAsync(data).then(function(contents) {
            Object.keys(contents.files).forEach(function(filename) {
                zip.file(filename).async('nodebuffer').then(function(content) {
                    var dest = path + filename;
                    fs.writeFileSync(dest, content);
                });
            });
        });
    }
});