mdn · rpl · Dec 31, 2016 · Jan 10, 2017 · Jan 10, 2017 · Jan 11, 2017
diff --git a/indexeddb-files/README.md b/indexeddb-files/README.md
@@ -0,0 +1,38 @@
+# indexeddb-files
+
+This add-on shows how to read and save files using the IndexedDB API and the subset of the "File and Directory Entries API" supported on Firefox.
+
+## What it does ##
+
+The extension includes:
+
+* a browser action which opens a popup with a list of examples
+* 2 file manipulations examples (that are opened in a tab by clicking their related link)
+
+## What it shows ##
+
+- **Save files into IndexedDB**: which shows how to read a local directory tree and save all its content into IndexedDB files, then read files from indexedDB and download them as a single zip files.
+- **Create temporary files**: which shows how to use the MutableFile API exposed by the IndexedDB API to create mutable files and save them using the IndexedDB API.
+
+## More docs on MDN ##
+
+- File and Directory Entries API:
+  * https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support
+  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
+  * https://developer.mozilla.org/en-US/docs/Web/API/File
+  * https://developer.mozilla.org/en-US/docs/Web/API/Blob
+  * https://developer.mozilla.org/en-US/docs/Web/API/FileReader
+
+- IndexedDB API:
+  * https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
+
+- IndexedDB MutableFile API:
+  * https://developer.mozilla.org/en-US/docs/Web/API/IDBMutableFile
+
+- Quota limits and Storage types:
+  * https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Firefox_specifics
+  * https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API#Storage_limits_and_eviction_criteria
+
+## Acknowledgements
+
+* WebExtension icon courtesy of [icons8.com](http://icons8.com).
diff --git a/indexeddb-files/icons/files-50.png b/indexeddb-files/icons/files-50.png
diff --git a/indexeddb-files/manifest.json b/indexeddb-files/manifest.json
@@ -0,0 +1,18 @@
+{
+  "description": "Save and Load Files using IndexedDB",
+  "manifest_version": 2,
+  "name": "indexeddb-fs",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/indexeddb-fs-webext",
+  "icons": {
+    "48": "icons/files-50.png"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "48": "icons/files-50.png"
+    },
+    "default_title": "IndexedDB Files",
+    "default_popup": "popup.html"
+  }
+}
diff --git a/indexeddb-files/popup.html b/indexeddb-files/popup.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>IndexedDB files handling demos</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <h4>IndexedDB files handling demos:</h4>
+    <ol>
+      <li><a href="#" id="reading-saving-files-example">Read a local directory tree and save its content into IndexedDB</a></li>
+      <li><a href="#" id="mutable-files-example">Create temporary files and save them using IndexedDB</a></li>
+    </ol>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/indexeddb-files/popup.js b/indexeddb-files/popup.js
@@ -0,0 +1,7 @@
+document.querySelector("#reading-saving-files-example").onclick = () => {
+  browser.tabs.create({url: "/tabs/save-local-dirtree.html", active: true});
+};
+
+document.querySelector("#mutable-files-example").onclick = () => {
+  browser.tabs.create({url: "/tabs/mutablefile.html", active: true});
+};
diff --git a/indexeddb-files/tabs/common-log-helpers.js b/indexeddb-files/tabs/common-log-helpers.js
@@ -0,0 +1,44 @@
+// Log text and images utilities.
+const dbLogsEl = document.querySelector("#indexed-logs");
+
+document.querySelector("#clear-logs").onclick = () => {
+  while (dbLogsEl.firstChild) {
+    dbLogsEl.removeChild(dbLogsEl.firstChild);
+  }
+};
+
+function dbLogHTMLElement(el) {
+  dbLogsEl.appendChild(el);
+
+  // Scroll to the bottom automatically.
+  dbLogsEl.scrollTop = dbLogsEl.scrollHeight;
+}
+
+function dbLog(...args) {
+  dbLogHTMLElement(document.createTextNode('\n' + args.join(" ")));
+}
+
+function logIDBFileLink({prefixText, fileIDBKey, suffixText, onClickHandler }) {
+  if (prefixText) {
+    dbLogHTMLElement(document.createTextNode(prefixText));
+  }
+
+  const linkEl = document.createElement("a");
+  linkEl.setAttribute("href", "#");
+  linkEl.textContent = fileIDBKey;
+  if (typeof onClickHandler == "function") {
+    linkEl.onclick = () => {
+      onClickHandler(fileIDBKey);
+    };
+  }
+
+  dbLogHTMLElement(linkEl);
+
+  if (suffixText) {
+    dbLogHTMLElement(document.createTextNode(suffixText));
+  }
+}
+
+function logImage(imageUrl) {
+
+}
diff --git a/indexeddb-files/tabs/common-tab.css b/indexeddb-files/tabs/common-tab.css
@@ -0,0 +1,30 @@
+.overflow-scroll {
+  max-height: 200px;
+  overflow: auto;
+  border: 1px dashed grey;
+  padding: 0.5em;
+}
+
+#logs-panel {
+  background: #EEEEEE;
+  padding: 2em;
+  display: flex;
+  flex-direction: column;
+}
+
+body {
+  display: flex;
+}
+
+main {
+  flex: 1 1 auto;
+}
+
+aside {
+  flex: 1 1 auto;
+  min-width: 50%;
+}
+
+details > div {
+  padding: 1em;
+}
diff --git a/indexeddb-files/tabs/mutablefile.html b/indexeddb-files/tabs/mutablefile.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Create and save temporary files</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="common-tab.css">
+  </head>
+  <body>
+    <main>
+      <h1>Create and save temporary files</h1>
+
+      <p>Create a temporary file, give it some data and a name, then save it using indexedDB.</p>
+
+      <details id="step-01">
+        <summary>1. Create a MutableFile</summary>
+        <div>
+          <div>
+            <input type="button" id="create-file" value="Create a MutableFile" disabled>
+            <input type="button" id="get-metadata" value="Get Metadata" disabled>
+          </div>
+        </div>
+      </details>
+
+      <details id="step-02">
+        <summary>2. Append data to the MutableFile</summary>
+        <div>
+          <div>
+            <textarea id="file-data" placeholder="data to save into the file..."
+                      style="width: 100%;" disabled></textarea>
+
+            <input type="button" id="save-data" value="Append data" disabled>
+          </div>
+
+        </div>
+      </details>
+
+      <details id="step-03">
+        <summary>3. Save to IndexedDB</summary>
+        <div>
+          <input id="filename-to-save" placeholder="filename to save..." disabled>
+          <input type="button" id="persist-file" value="Save to IndexedDB key" disabled>
+        </div>
+      </details>
+
+      <details id="step-04">
+        <summary>4. Retrieve saved files</summary>
+        <div>
+          <input type="button" id="list-saved-files" value="List all the saved files" disabled>
+
+          <div>
+            <input id="filename-to-read" placeholder="filename to read..." disabled>
+            <input type="button" id="read-file" value="Read saved file" disabled>
+          </div>
+        </div>
+      </details>
+    </main>
+
+    <aside>
+      <div id="logs-panel">
+        <pre id="indexed-logs" class="overflow-scroll">Logs from the IndexedDB operations...</pre>
+
+        <button id="clear-logs">Clear Logs</button>
+      </div>
+    </aside>
+
+    <script src="common-log-helpers.js"></script>
+    <script src="mutablefile.js"></script>
+  </body>
+</html>