javascript - zip a Blob with zip.js

Question

I need to store a lot of text in WebSQl, so I decided to compress the text with zip.js and store the compressed Blobs.

From the documentation you can compress a blob as follows:

function zipBlob(filename, blob, callback) {
   // use a zip.BlobWriter object to write zipped data into a Blob object
   zip.createWriter(new zip.BlobWriter("application/zip"), function(zipWriter) {
      // use a BlobReader object to read the data stored into blob variable
      zipWriter.add(filename, new zip.BlobReader(blob), function() {
         // close the writer and calls callback function
         zipWriter.close(callback);
      });
   }, onerror);
}

Although this works, I don't understand why you need to specify a filename. Is this really necessary? And, is this file always removed after compression?

Answer 1

Check this answer here - it does not require a filename, and I'll bet its much easier to use. I've tried quite a few javascript compression/decompression implementations and have been stung by problems such as limits on size of original data, overall speed, efficiency, and so forth. It is oddly difficult to find a good compression/decompression implementation in javascript, but thankfully this one hasn't failed me yet (and I've used it quite a bit):

Compressing a blob in javascript

The implementation you have currently requires the filename because it is trying to be consistent with the zip, so that you can save it for example to a desktop and open it with your favorite zip utility. It sounds like your challenge is very similar to mine, I needed to save and restore compressed items out of local storage in the browser as well as on the server.

Answer 2

The filename is necessary according to this implementation. It wouldn't be necessary if you were only compressing the data, but zip.js builds zip files, which store files, which must have filenames.

In your original example, zipWriter.add() effectively converts your blob into a new file and adds it to a zip – and the "filename" parameter is the name you want that new file to have.

Here's an example that uses zip.js to add multiple blobs to a zip and then downloads it with FileSaver.js:

function zipBlob() {
    zip.createWriter(new zip.BlobWriter("application/zip"), function(writer) {
        files = ["abcd", "123"];
        var f = 0;

        function nextFile(f) {
            fblob = new Blob([files[f]], { type: "text/plain" });
            writer.add("file"+f, new zip.BlobReader(fblob), function() {
                // callback
                f++;
                if (f < files.length) {
                    nextFile(f);
                } else close();
            });
        }

        function close() {
            // close the writer
            writer.close(function(blob) {
                // save with FileSaver.js
                saveAs(blob, "example.zip");
            });
        }

        nextFile(f);

    }, onerror);
}