Reading ZIP files in JavaScript Using JSZip

The steps below implement a JavaScript program that reads the contents of a couple of text files contained in a test ZIP file and displays them to the screen. It is regrettable that a separate test ZIP must be created, but the JSZip library apparently thinks the ZIP file that it comes packaged in is corrupt.

1. Download JSZip. JSZip is an open-source ZIP file library for JavaScript. As of this writing, the latest version is available at the URL “http://stuk.github.io/jszip“.

2. In any convenient location, create a new folder named JavaScriptZipTest.

3. Extract the downloaded JSZip archive, locate the files “jszip.js” and “jszip-load.js” within it, and copy them to the newly created JavaScriptZipTest folder.

4. Still in the JavaScriptZipText folder, create a new text file named “Test.txt”, containing the text “This is a test.”.

5. Still in the JavaScriptZipText folder, create a new text file named “Test2.txt”, containing the text “This is also a test.”.

6. Still in the JavaScriptZipText folder, use a ZIP file utility (such as 7-Zip) to create a new ZIP file named “Test.zip”, containing the two newly created text files “Test.txt” and “Test2.txt”.

7. Still in the JavaScriptZipTest folder, create a new text file named “JavaScriptZipTest.txt”, containing the following text.

<html>
<body>

	<label for="inputFile">Select a ZIP File:</label>
	<input id="inputFile" type="file" onchange="inputFile_Changed()"></input><br />		

	<label for="ulFilesContained">Files contained in ZIP file:</label><br />	
	<ul id="ulFilesContained"></ul><br />	

	<label for="textAreaFileSelectedAsText">File Selected as Text:</label><br />	
	<textarea id="textAreaFileSelectedAsText" rows="8"></textarea><br />

<script type="text/javascript" src="jszip.js" ></script>
<script type="text/javascript" src="jszip-load.js" ></script>

<script type="text/javascript" >

function inputFile_Changed()
{
	var inputFile = document.getElementById("inputFile");
	var zipFileToLoad = inputFile.files[0];

	var fileReader = new FileReader();

	fileReader.onload = function(fileLoadedEvent) 
	{
		var zipFileLoaded = new JSZip(fileLoadedEvent.target.result);

		var ulFilesContained = document.getElementById("ulFilesContained");

		for (var nameOfFileContainedInZipFile in zipFileLoaded.files)
		{
			var fileContainedInZipFile = zipFileLoaded.files[nameOfFileContainedInZipFile];

			var linkFileContained = document.createElement("a");
			linkFileContained.innerHTML = nameOfFileContainedInZipFile;
			linkFileContained.href = "#";
			linkFileContained.file = fileContainedInZipFile;
			linkFileContained.onclick = displayFileAsText;
			var liFileContained = document.createElement("li");
			liFileContained.appendChild(linkFileContained);
			ulFilesContained.appendChild(liFileContained);
		}

	};

	fileReader.readAsArrayBuffer(zipFileToLoad);
}

function displayFileAsText(event)
{
	var textAreaFileSelectedAsText = document.getElementById("textAreaFileSelectedAsText");
	textAreaFileSelectedAsText.innerHTML = event.target.file.asText();
}

</script>
</body>
</html>

8. Open the newly created JavaScriptZipTest.html file in a browser that runs JavaScript (and that has the correct security settings enabled).

9. Select the “Test.zip” file in the file uploader. A list of files contained in the ZIP file will appear. Click on one of the contained files to display its contents as text.

NOTES

  • There’s no real error handling in this program, so if you attempt to load a file that’s not a ZIP file, or if you attempt to view the contents of a non-text file as text, you’ll encounter errors.
  • As I said earlier, when I tried to open the ZIP file that the JSZip library actually came packaged in, it threw an error saying that the file was invalid. But I guess it’s pretty probable that I’m not using it quite right.
Advertisements
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

2 Responses to Reading ZIP files in JavaScript Using JSZip

  1. Thanks for this. đŸ™‚

  2. Gunar says:

    Thanks for this example!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s