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 ““.

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 “”, 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.


	<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(;

		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");



function displayFileAsText(event)
	var textAreaFileSelectedAsText = document.getElementById("textAreaFileSelectedAsText");
	textAreaFileSelectedAsText.innerHTML =;


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 “” 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.


  • 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.
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: Logo

You are commenting using your 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