Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added simple file api example

  • Loading branch information...
commit b8f88cdf691a7eedb9e7267304c358afc4db9490 1 parent 3ba5802
@remy authored
Showing with 51 additions and 2 deletions.
  1. +12 −2 demos.json
  2. +39 −0 demos/file-api-simple.html
View
14 demos.json
@@ -4,7 +4,7 @@
"url": "dataset",
"tags": "dataset",
"support": {
- "live": "chrome",
+ "live": "chrome opera",
"nightly": "safari"
},
"test": "'dataset' in document.createElement('i')"
@@ -21,6 +21,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",
"note": "Not directly part of HTML5",
@@ -28,7 +38,7 @@
"support": {
"live": "firefox chrome"
},
- "test": "typeof FileReader != 'undefined'"
+ "test": "typeof FileReader != 'undefined' && Modernizr.draganddrop"
},
{
"desc": "Simple chat client",
View
39 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>
Please sign in to comment.
Something went wrong with that request. Please try again.