Extract ZIp File Using Library JSZip

Question

I am working in windows 8 using HTML/JS. I am trying to Extract a Zip file which is picked file using FilePicker.

To extract Zip file I am using this page.

In this Link there is a function to Extract Zip file unzipAsync

function unzipAsync(filePath, replaceIfExists) {

    var fileCollisionOption = replaceIfExists ?
        storage.CreationCollisionOption.replaceExisting :
        storage.CreationCollisionOption.failIfExists;

    return storage.StorageFile
        .getFileFromPathAsync(filePath)
        .then(getFileAsUint8Array)
        .then(function (zipFileContents) {
            //Create the zip data in memory
            var zip = new JSZip(zipFileContents);

            //Extract files
            var promises = [];
            var lf = storage.ApplicationData.current.localFolder;
            _.each(zip.files, function (zippedFile) {

                //Create new file
                promises.push(lf
                    .createFileAsync(zippedFile.name, fileCollisionOption)
                    .then(function (localStorageFile) {
                        //Copy the zipped file's contents into the local storage file
                        var fileContents = zip.file(zippedFile.name).asUint8Array();
                        return storage.FileIO
                            .writeBytesAsync(localStorageFile, fileContents);
                    })
                );
            });

            return WinJS.Promise.join(promises);
        });
}

Before this I added JSZIP Library to Project folder.
Help me, How Can I integrate the Library to my project. Here is my project Link

Edit:

function getFileAsUint8Array(file) {
    return storage.FileIO.readBufferAsync(file)
        .then(function (buffer) {
            //Read the file into a byte array
            var fileContents = new Uint8Array(buffer.length);
            var dataReader = storage.Streams.DataReader.fromBuffer(buffer);
            dataReader.readBytes(fileContents);
            dataReader.close();

            return fileContents;
        });
}

Now it is working with out error. But it is not doing any thing like extracting my file.

NOTE:

- If anyone knows any another way which better than this or other Library which I can use to extract file for WinJS; please suggest me.

Answer 1

I did using Decompressing Sample by adding C# windows runtime to my JavaScript project

Here is my post

Answer 2

Well, I'm guessing you haven't created a getFileAsUint8Array function (or at least, you aren't showing it above). I am doing something similar (although getting the zip file from an XHR call instead). Once I have the zip file and the folder I want to put the zip files in I do something like the code below.

Note, however, that I had to modify this code as I do a few other things, so I haven't tested it exactly as is (and obviously it wouldn't work within your code above).

Here's the (mostly) full code:

WinJS.xhr({ "url": zipUrl, "responseType": "arraybuffer" })
    .done(
        function (e) {
            if (!e.getResponseHeader("content-type") === "application/zip") {
                console.error("Remote file was not sent with correct Content-Type: expected 'application/zip', but received '" + e.getResponseHeader("content-type") + "'");
            }

            unzipAndStore(new JSZip(e.response), someLocalFolder);
        },
        function() { /* handle ajax errors */ }
    );

/**
 * @param {JSZip} jszipobj The JSZip object
 * @param {StorageFolder} localFolder The folder to unzip into
 * @return {Promise}
 */
var unzipAndStore = function (jszipobj, localFolder) {
    var promises = [];

    Object.keys(jszipobj.files).forEach(function (key) {
        var fileName;

        // ignore folder entries, they're handled as needed below
        if (/\/$/.test(key)) { return; }

        fileName = jszipobj.files[key].name.match(/[^\/]+\.[^\.\/]+$/);
        if (!fileName) {
            console.error("Unable to process zip entry without proper filename: ", jszipobj.files[key].name);
            return;
        }
        fileName = fileName[0];

        promises.push(
            getFolderFromPathRecursive(jszipobj.files[key].name, localFolder)
                .then(
                    function (subFolder) {
                        console.log("creating file in folder: ", fileName, subFolder.name);

                        return subFolder.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.replaceExisting)
                    }
                )
                .then(
                    function (localStorageFile) {
                        return Windows.Storage.FileIO
                            .writeBytesAsync(localStorageFile, jszipobj.file(jszipobj.files[key].name).asUint8Array());
                    }
                )
        );

    });

    return WinJS.Promise.join(promises);
};

/**
 * Promise completes with the lowest level folder in the given path, 
 * creating subfolders along the way
 * @param {String} path The path to the lowest subfolder you want a reference to
 * @param {StorageFolder} rootFolder The folder to begin at for this iteration
 * @return {Promise}
 */
var getFolderFromPathRecursive = function (path, rootFolder) {
    var normalizedPath = path.replace(/\/?[^\/]+\.[^\.\/]+$/, ""),  // remove a possible filename from the end of the path
        folders = normalizedPath.split(/\//), // get an array of the folders in the path
        subFolderName = folders.shift(); // remove the first folder in the path as the new one to create

    return new WinJS.Promise(function (complete, error) {
        if (!subFolderName || !subFolderName.length) {
            complete(rootFolder);
            return;
        }

        rootFolder
            .createFolderAsync(subFolderName, Windows.Storage.CreationCollisionOption.openIfExists)
                .then(
                    function (folder) {
                        return getFolderFromPathRecursive(folders.join("/"), folder);
                    },
                    error
                )
                .then(
                    function(folder) {
                        complete(folder);
                        return;
                    },
                    error
                )
    });
};