First version, displaying archive file contents

mozilla · Sep 26, 2012 · 4b216b8 · 4b216b8
1 parent 8f8edda
commit 4b216b8
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 0 deletions.
diff --git a/archive-api/css/base.css b/archive-api/css/base.css
@@ -0,0 +1,23 @@
+#no-archive-api {
+    color: #f00;
+    display: none;
+}
+
+#error {
+    color: #f00;
+    display: none;
+}
+
+#drop-files {
+    height: 80px;
+    border: 1px dashed #000;
+    padding: 10px;
+    text-align: center;
+}
+
+#display-files li {
+    list-style: none;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #000;
+}
diff --git a/archive-api/index.html b/archive-api/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>ArchiveAPI - Mozilla Hacks on GitHub</title>
+    <link rel="stylesheet" type="text/css" href="../media/css/front.css">
+    <link rel="stylesheet" type="text/css" href="css/base.css">
+  </head>
+
+  <body>
+
+    <h1>ArchiveAPI</h1>
+
+    <p id="no-archive-api">Note: you have no ArchiveAPI support in your web browser.</p>
+    <p id="error"></p>
+
+    <p>Choose an archive file by browsing or dropping it in the drop area below. Through the ArchiveAPI, the included files are listed together with possible previews.</p>
+
+    <p><input type="file" id="browse-files"></p>
+
+    <div id="drop-files">
+      Drop archive files here
+    </div>
+
+    <div id="display-files"></div>
+
+    <script src="js/archive-api.js"></script>
+
+  </body>
+</html>
diff --git a/archive-api/js/archive-api.js b/archive-api/js/archive-api.js
@@ -0,0 +1,74 @@
+var browseFiles = document.querySelector("#browse-files"),
+    dropFiles = document.querySelector("#drop-files"),
+    displayFiles = document.querySelector("#display-files"),
+    error = document.querySelector("#error");
+
+if (!window.ArchiveReader) {
+    var noArchiveAPI = document.querySelector("#no-archive-api");
+    noArchiveAPI.style.display = "block";
+}
+
+browseFiles.onchange = function () {
+    readArchive(this.files[0]);
+};
+
+// Needed to make the ondrop event work
+dropFiles.ondragover = function (evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+}
+
+dropFiles.ondrop = function (evt) {
+    readArchive(evt.dataTransfer.files[0]);
+    evt.preventDefault();
+    evt.stopPropagation();
+};
+
+function readArchive (file) {
+    var archiveFile = new ArchiveReader(file),
+        fileNames = archiveFile.getFilenames();
+
+    error.style.display = "none";
+
+    fileNames.onerror = function () {
+        error.innerHTML = "Error reading filenames";
+        error.style.display = "block";
+    };
+
+    fileNames.onsuccess = function (request) {
+        var result = this.result,
+            list = document.createElement("ul"),
+            file;
+        for (var i=0, l=result.length; i<l; i++) {
+            file = archiveFile.getFile(result[i]);
+            file.onerror = function () {
+                error.innerHTML = "Error accessing file";
+                error.style.display = "block";
+            };
+            file.onsuccess = function () {
+                var listItem = document.createElement("li"),
+                    currentFile = this.result,
+                    fileType = currentFile.type,
+                    fileInfo;
+                fileInfo = "<div><strong>Name:</strong> " + currentFile.name + "</div>";
+                fileInfo += "<div><strong>Size:</strong> " + parseInt(currentFile.size / 1024, 10) + " kb</div>";
+                fileInfo += "<div><strong>Type:</strong> " + fileType + "</div>";
+                if (fileType.search(/image/i) != -1) {
+                    // Get window.URL object
+                    var URL = window.URL || window.webkitURL;
+                    // Create ObjectURL
+                    var imgURL = URL.createObjectURL(currentFile);
+
+                    fileInfo += '<div><img src="' + imgURL + '" alt=""></div>';
+                }
+                else if (fileType.search(/text/i) != -1) {
+                    var fileReader = new FileReader();
+
+                }
+                listItem.innerHTML = fileInfo;
+                list.appendChild(listItem);
+            };            
+        }
+        displayFiles.appendChild(list);
+    };
+}