Zipping folder containing subfolder using JavaScript

Question

how to zip a folder using javascript knowing that i am making a javascript win8 store app , i have access to MyDocumnets on the client PC , my task now is to zip a folder (saved data of the app) and upload it to my server ??

Answer 1

There is no direct way to zip a folder, or even a file for that matter, using plain JavaScript (no custom libraries). This is because JavaScript is generally limited to operating in the DOM. It would be really bad for example if some malicious website was able to get you to open a page with their JavaScript on it which say, deleted random files on your machine.

However, you do have an option or two. The closest thing that's available right now (again, not considering custom libraries) is the HTML 5 File API. Support for it across major browsers varies, but most newer builds have at least limited, if not full support for it.

With the HTML 5 File API you can access, edit, and write files in a sandboxed environment in the browser. Based on this, what you could do is:

1. Get access to all the files you want to put in the zip using the HTML 5 File API
2. Write all the data from those files into a new file, using the .zip format
3. Save that file as myfile.zip

Part 2 there is going to be your struggle. Parts 1 and 3 are pretty straight forward. Check out this guide on getting started with HTML 5 File API.

The other, likely better option is to zip the files on your server and then just send the .zip to the client machine. Likely will be a lot easier than using the HTML 5 File API.

Answer 2

An alternative to finding a straight-up JS library (which is difficult), is to find a good C/C++ library and wrap it inside a Windows Runtime component. To give a little quick background, the entirety of the WinRT API is written in a way that makes it possible to project that API surface area into multiple languages such as C++, C#, VB, and JavaScript. This model is extensible, which means that you can write your own APIs that behave in exactly the same way. Visual Studio even has templates for this in the C#, VB, and C++ language options.

For an app written in JavaScript, what this makes possible is that you can access a whole host of additional APIs that are not native to JavaScript, simply by creating a small WinRT component (it's just a DLL with some metadata) that's implemented in a language like C++ that does have access to many more APIs, e.g. those in Win32, COM, and .NET. The whitelist of such APIs for Windows Store apps can be found on http://msdn.microsoft.com/en-us/library/windows/apps/br205757.aspx.

Generally speaking, for a JS app you want to implement the component in C++ (which is how WinRT is implemented). Although can also do it a bit more easily in C# or VB, you end up loading the whole CLR and taking something on the order of a 45MB memory hit.

So if you can find a good ZIP library for C++, and it uses the whitelisted APIs on the previous link, then it's straightforward to create a WinRT component that presents an interface usable from JavaScript. I'd recommend having the JS app just pass something like the StorageFolder you're looking to compress and have it return the StorageFile to upload. Then you can simply pass that StorageFile to the BackgroundTransfer API (http://msdn.microsoft.com/en-us/library/windows/apps/windows.networking.backgroundtransfer.aspx), which you should be using for any significant transfer operation as it will make sure it continues if your app is suspended.

For more details on writing WinRT components, refer to Chapter 18 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition. It also details how to create async APIs which is probably what you want in this case because a zipping operation could take a long time and you don't want to block UI responsiveness.