Extract Zip and Rar Files with HTML5
Here is the HTML5 Online Archive Viewer
A while ago, I blogged about using the Imgur API to upload images via file, directory, or zip archive. Today, I want to dig a little deeper into processing archive files with JavaScript and reading their contents, the files inside the archive, on the client side. I will explore zip and rar archive files and leverage the HTML5 FileReader API and Blob objects to read the files inside the archives. This will allow you to not only see what is inside these archive files but you can actually read and view the data inside, all within a browser.
To process ZIP files I am going to use zip.js, a JavaScript library to zip and unzip files. For RAR files, I just found rar.js, a JavaScript Unrar Utility. One thing that I don’t like about this script is that it does not handle compressed archives and rar files are almost always compressed. I am hoping that support for compression will be added soon. The script also has a method to create a Blob object for the files inside a rar, but there is no support for passing a MIME type. As a result, I added a small MIME type to file extension mapping to the script and duplicated that for the files extracted from a ZIP archive.
This is important, as the browser needs to know how to process the data in a Blob object. If the data is just text, we want to see text, but if the data is an image, you want the browser to show the picture and not text. Since I stored the archive contents inside a JSON object, I needed to convert the JSON to a HTML table and used this script. Finally, when someone clicks the “open” button, I used the createObjectURL function to construct a Blob URL that points to the contents of the file. So, we are reading archive files, showing the files inside the archive, and also showing the contents of the those files, all on the client side.
Check out the way that all works here.
External:
Strategies for using local files in your web application
createObjectURL
Reading Files Using The HTML5 FileReader API
