Unzipping zip archives with JavaScript in Firefox 3.6

Question

I am toying with an application that will demo some Firefox 3.6 specific functionality, most of which are listed here: http://demos.hacks.mozilla.org/openweb/

I want to drag a zip file in the browser, unzip it, and work with the unzipped contents.

Are there any existing libraries that can do this? Does FireFox 3.6 in particular have something I can use? Or would I have to roll my own unzipper library?

---

For the record: http://github.com/augustl/js-unzip

Answer 1

There are existing libraries, here is one (as an example): http://code.google.com/p/jslibs/

Answer 2

See the library and demo on this site::

http://cheeso.members.winisp.net/srcview.aspx?dir=js-unzip

The main class in the library is ZipFile. To read a zip file, call new ZipFile(), passing the URL for the zip archive, and a function to call when the zipfile has been successfully read. This is an asynchronous callback. Like this:

var doneReading = function(zip){ ... };
var zipFile = new ZipFile(url, doneReading, verbosity);

The verbosity argument is optional.

ZipFile exposes these properties:

• entries - an array of ZipEntry objects
• entryNames - an array of strings, names of entries in the ZipFile
• status - an array of status messages generated by the ZipFile
• binFile - the property used internally to read the binary file
• verbose - an integer. With verbose > 0, status messages will get put into the status property.

In the doneReading function you can do what you like with the in the zipFile. For example, you might first want to verify that the file was read successfully. Any WARNING or ERROR message will be noted in the status array. For example, if the URL returns a 403 or 404, it will be noted here.

var doneReading = function(zip){
    for (var i=0; i<zip.status.length;  i++) {
        var msg = zip.status[i];
        if (msg.indexOf("ERROR") !== 0) {
           ....
        }
    }
};

You then might want to display the names of the entries:

var doneReading = function(zip){
       ....
    for (var i=0; i<zip.entries.length;  i++) {
        var entry = zip.entries[i];
        var entryInfo = "<li>" + entry.name + "</li>";
        $("#zipcontents").append(entryInfo);
    }
};

...or extract them:

var extractCb = function(entry, entryContent) {
    // entry is a ZipEntry.
    // entryContent is either a string or a byte array.
    ....
};

var doneReading = function(zip){
       ....
    for (var i=0; i<zip.entries.length;  i++) {
        var entry = zip.entries[i];
        // extract asynchronously
        entry.extract(extractCb);
    }
}

Each element in zip.entries is a ZipEntry object, containing various properties for the entry:

• name - the name of the entry, including any path.
• crc32 - the crc32 for the entry
• lastModified - a Date, the last modified date and time for the entry
• uncompressedSize - the size of the entry when uncompressed
• compressedSize - the size of the entry when compressed
• and others...