From b8f88cdf691a7eedb9e7267304c358afc4db9490 Mon Sep 17 00:00:00 2001
From: remy <remy@remysharp.com>
Date: Wed, 13 Apr 2011 08:52:26 +0100
Subject: [PATCH] Added simple file api example

---
 demos.json                 | 14 ++++++++++++--
 demos/file-api-simple.html | 39 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 demos/file-api-simple.html

diff --git a/demos.json b/demos.json
index 49e9d8c..b43c0f7 100644
--- a/demos.json
+++ b/demos.json
@@ -4,7 +4,7 @@
     "url": "dataset",
     "tags": "dataset",
     "support": {
-      "live": "chrome",
+      "live": "chrome opera",
       "nightly": "safari"
     },
     "test": "'dataset' in document.createElement('i')"
@@ -20,6 +20,16 @@
     },
     "test": "Modernizr.history"
   },
+  {
+    "desc": "Browser based file reading",
+    "url": "file-api-simple",
+    "note": "Not part of HTML5",
+    "tags": "file-api",
+    "support": {
+      "live": "firefox chrome opera"
+    },
+    "test": "typeof FileReader != 'undefined'"
+  },
   {
     "desc": "Drag files directly into your browser",
     "url": "file-api",
@@ -28,7 +38,7 @@
     "support": {
       "live": "firefox chrome"
     },
-    "test": "typeof FileReader != 'undefined'"
+    "test": "typeof FileReader != 'undefined' && Modernizr.draganddrop"
   },
   {
     "desc": "Simple chat client",
diff --git a/demos/file-api-simple.html b/demos/file-api-simple.html
new file mode 100644
index 0000000..966ccde
--- /dev/null
+++ b/demos/file-api-simple.html
@@ -0,0 +1,39 @@
+<title>File API (simple)</title>
+<article>
+  <p id="status">File API &amp; FileReader API not supported</p>
+  <p><input type=file></p>
+  <p>Select an image from your machine to read the contents of the file without using a server</p>
+  <div id="holder"></div>
+</article>
+<script>
+var upload = document.getElementsByTagName('input')[0],
+    holder = document.getElementById('holder'),
+    state = document.getElementById('status');
+
+if (typeof window.FileReader === 'undefined') {
+  state.className = 'fail';
+} else {
+  state.className = 'success';
+  state.innerHTML = 'File API & FileReader available';
+}
+ 
+upload.onchange = function (e) {
+  e.preventDefault();
+
+  var file = upload.files[0],
+      reader = new FileReader();
+  reader.onload = function (event) {
+    var img = new Image();
+    img.src = event.target.result;
+    // note: no onload required since we've got the dataurl...I think! :)
+    if (img.width > 560) { // holder width
+      img.width = 560;
+    }
+    holder.innerHTML = '';
+    holder.appendChild(img);
+  };
+  reader.readAsDataURL(file);
+
+  return false;
+};
+</script>