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. Since I stored the archive contents inside a JSON object, I needed to convert the JSON to a HTML table and used this script. 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. This is important, as the browser needs to know how to process the data in a Blob object. 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. 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. I am hoping that support for compression will be added soon. 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. For RAR files, I just found rar.js, a JavaScript Unrar Utility. To process ZIP files I am going to use zip.js, a JavaScript library to zip and unzip files. 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. I will explore zip and rar archive files and leverage the HTML5 FileReader API and Blob objects to read the files inside the archives.

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. A while ago, I blogged about using the Imgur API to upload images via file, directory, or zip archive.

Online rar to zip