How to extract a zip file and display content on the client side

Question

I have a zip file located at http://my-website.com/user-site.zip . This zip file contains a bunch of html, css and javascript files, which when extracted look something like this (exact contents are unknown):

 index.html js/ script.js css/ style.css 

I want to be able to view this web page, for example, iframe, after loading it in a browser.

Now my approach is as follows:

• Download the zip file from the server.
• Use zip.js to extract the files in memory.
• Use createObjectUrl (explained here ) to create URLs for each of these assets.
• Point the iframe to the url generated by index.html .

It almost works, except for one problem. The URLs created by createObjectUrl are pretty random, so index.html cannot resolve links to other resources. How can I get around this?

Answer 1

Very big question! I'm sitting here thinking it over now! One thing you could do is create a JavaScript object / array to "map" the files and their paths along with your created object URLs. Then use JavaScript to replace the relative paths with the absolute URLs of the objects. If ... you cannot get the file path.

If so, then you might be interested in the JavaScript library, which will be JSZip , which can give you paths for files in a ZIP archive.

For your map, you can do something like this (after you remove the necessary parts from the JSZip path, as the root directory):

 var map = [ {"relativePath":"css.css","absolutePath":*Object URL Goes Here*} ]; 

Then skip each entry on the map and replace each instance of relativePath [x] with absolutePath [x] in this file, whether it be raw text in a file or innerHTML iframe.

Hope this helps!