Skip to content
This repository has been archived by the owner on Oct 9, 2019. It is now read-only.

Commit

Permalink
Added simple file api example
Browse files Browse the repository at this point in the history
  • Loading branch information
remy committed Apr 13, 2011
1 parent 3ba5802 commit b8f88cd
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 2 deletions.
14 changes: 12 additions & 2 deletions demos.json
Expand Up @@ -4,7 +4,7 @@
"url": "dataset",
"tags": "dataset",
"support": {
"live": "chrome",
"live": "chrome opera",
"nightly": "safari"
},
"test": "'dataset' in document.createElement('i')"
Expand All @@ -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",
Expand All @@ -28,7 +38,7 @@
"support": {
"live": "firefox chrome"
},
"test": "typeof FileReader != 'undefined'"
"test": "typeof FileReader != 'undefined' && Modernizr.draganddrop"
},
{
"desc": "Simple chat client",
Expand Down
39 changes: 39 additions & 0 deletions 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>

0 comments on commit b8f88cd

Please sign in to comment.