Skip to content

Instantly share code, notes, and snippets.

@tetsuharuohzeki

tetsuharuohzeki/archive-reader.html

Created August 7, 2012 15:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tetsuharuohzeki/3286091 to your computer and use it in GitHub Desktop.
Save tetsuharuohzeki/3286091 to your computer and use it in GitHub Desktop.
Download ZIP
Archive API sample for Firefox Nightly 17
Raw
archive-reader.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Archive Reader</title>
<script type="application/javascript" src="archive-reader.js"></script>
<style>
#drop-area {
float: left;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 50px;
}
#info-area {
float: left;
width: -moz-calc(100% - 400px);
width: -webkit-calc(100% - 400px);
width: -ms-calc(100% - 400px);
width: -o-calc(100% - 400px);
width: calc(100% - 400px);
min-width: 300px;
}
#info-area > section:not(:first-child) {
border-top: 1px solid gray;
margin-top: 50px;
}
.archive-file {
border: 1px solid black;
padding: 10px;
}
img, video {
max-width: 100%;
height: auto;
}
iframe {
max-width: 100%;
}
</style>
</head>
<body>
<h1>ArchiveReader sample</h1>
<div id="drop-area">
Drop Here
</div>
<div id="info-area">
<section>
<h2>Archive file info</h2>
<dl id="info-archive">
<dt>archive file name</dt>
<dd id="info-archive-name"></dd>
<dt>archive file size</dt>
<dd id="info-archive-size"></dd>
<dt>archive file type</dt>
<dd id="info-archive-type"></dd>
</dl>
</section>
<section>
<h2>File list in archive</h2>
<ul id="info-filelist"></ul>
</section>
<section>
<h2>File</h2>
<div id="files"></div>
</section>
</div>
</body>
</html>
Raw
archive-reader.js
/*
* Archive Reader sample
*/
"use strict";
var elm;
window.addEventListener("load", function onLoad(aEvent) {
aEvent.currentTarget.removeEventListener("load", onLoad);
var elm = document.getElementById("drop-area");
elm.addEventListener("dragenter", FileHandle);
elm.addEventListener("dragover", FileHandle);
elm.addEventListener("drop", FileHandle);
});
var FileHandle = {
handleEvent: function FileHandle_handleEvent(aEvent) {
aEvent.stopPropagation();
aEvent.preventDefault();
switch (aEvent.type) {
case "drop":
this.onDrop(aEvent);
break;
}
},
onDrop: function FileHandle_onDrop(aEvent) {
var dt = aEvent.dataTransfer;
var files = dt.files;
this.handleFiles(files);
},
handleFiles: function FileHandle_handleFiles(aFileList) {
var file = aFileList[0];
if (! (/application\/zip/.exec(file.type)) ) {
console.log(file.type + "is not supported.");
return;
}
this.initOutput();
this.outputInfo(file);
var archive = new ArchiveReader(file);
var fileNameHandle = archive.getFilenames();
var that = this;
fileNameHandle.onsuccess = function (event) {
var result = this.result;
that.outputFileList(result);
that.outputFileAll(this.reader, result);
};
fileNameHandle.onerror = function (event) {
console.log("Error: cannor get an all archived file list");
};
},
initOutput: function () {
var cleanup = function cleanup (aNode) {
while (aNode.hasChildNodes()) {
aNode.removeChild(aNode.firstChild);
}
};
// clean up info:
var nameElm = document.getElementById("info-archive-name");
nameElm.textContent = "?";
var sizeElm = document.getElementById("info-archive-size");
sizeElm.textContent = "? byte";
var typeElm = document.getElementById("info-archive-type");
typeElm.textContent = "?";
// cleanup file list
cleanup(document.getElementById("info-filelist"));
// clean up file
var fileElms = document.getElementsByClassName("archived-file-element");
for (var i = 0, l = fileElms.length; i < l; ++i) {
var elm = fileElms[i];
var uri = elm.getAttribute("src");
window.URL.revokeObjectURL(uri);
}
cleanup(document.getElementById("files"));
},
outputInfo: function (aFile) {
var nameElm = document.getElementById("info-archive-name");
nameElm.textContent = aFile.name;
var sizeElm = document.getElementById("info-archive-size");
sizeElm.textContent = aFile.size + " byte";
var typeElm = document.getElementById("info-archive-type");
typeElm.textContent = aFile.type;
},
outputFileList: function (aArray) {
var container = document.getElementById("info-filelist");
for (var i = 0, l = aArray.length; i < l; ++i) {
var elm = document.createElement("li");
elm.textContent = aArray[i];
container.appendChild(elm);
}
},
outputFileAll: function (aReader, aArray) {
for (var i = 0, l = aArray.length; i < l; ++i) {
var name = aArray[i];
var handle = aReader.getFile(name);
var that = this;
handle.onsuccess = function () {
that.outputFile(this.result);
};
handle.onerror = function () {
console.log("Error: cannot open archived file.");
};
}
},
outputFile: function (aFile) {
var list = document.getElementById("files");
var container = document.createElement("div");
container.setAttribute("class", "archive-file");
var name = document.createElement("h4");
name.textContent = aFile.name;
container.appendChild(name);
var elm = null;
var uri = window.URL.createObjectURL(aFile);
var type = aFile.type;
if (/^image\//.exec(type)) {
elm = document.createElement("img");
elm.setAttribute("src", uri);
}
else if (/^video\//.exec(type)) {
elm = document.createElement("video");
elm.setAttribute("src", uri);
}
else if (/^audio\//.exec(type)) {
elm = document.createElement("audio");
elm.setAttribute("src", uri);
}
else {
elm = document.createElement("iframe");
elm.setAttribute("sandbox", "");
elm.setAttribute("src", uri);
}
elm.classList.add("archived-file-element");
elm.setAttribute("data-file-type", type);
console.log(aFile.type);
container.appendChild(elm);
list.appendChild(container);
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment