add file picker to testbed

jwagner · jwagner · commit 2e526ce5879e · 2014-04-16T20:23:27.000+02:00
diff --git a/examples/style.css b/examples/style.css
@@ -8,6 +8,9 @@ body {
 p {
     max-width: 900px;
 }
+input[type=file] {
+    display: block;
+}
 input[type=range] {
     width: 300px;
 }
diff --git a/examples/testbed.html b/examples/testbed.html
@@ -10,6 +10,7 @@ <h1>smartcrop.js testbed</h1>
     <p>smartcrop.js is a content aware image cropping library. On this page you can test it with your own images. You can learn more about the library on it's <a href="https://github.com/jwagner/smartcrop.js/">github page</a>.</p>
     <div>
     <form>
+        <input type=file name=file accept="image/*" >
         <label>Width<div><input name=width type="range" min=50 max=500 step=1 value=250 /><span class=value>250</span>px</div></label>
         <label>Height<div><input name=height type="range" min=50 max=500 step=1 value=250 /><span class=value>250</span>px</div></label>
         <label>minScale<div><input name=minScale type="range" min=0.5 max=1.0 step=0.1 value=0.9 /><span class=value>0.9</span></div></label>
diff --git a/examples/testbed.js b/examples/testbed.js
@@ -7,19 +7,26 @@ $('html')
     .on('dragover', function(e) {e.preventDefault(); return false;})
     .on('drop', function(e) {
         var files = e.originalEvent.dataTransfer.files;
-        if (files.length > 0) {
-            var file = files[0];
-            if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
-                var reader = new FileReader();
-                // Note: addEventListener doesn't work in Google Chrome for this event
-                reader.onload = function (evt) {
-                    load(evt.target.result);
-                 };
-                reader.readAsDataURL(file);
-            }
-        }
+        handleFiles(files);
         return false;
     });
+$('input[type=file]').change(function(e) { handleFiles(this.files); } );
+
+function handleFiles(files){
+    if (files.length > 0) {
+        var file = files[0];
+        if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
+            var reader = new FileReader();
+            // Note: addEventListener doesn't work in Google Chrome for this event
+            reader.onload = function (evt) {
+                load(evt.target.result);
+             };
+            reader.readAsDataURL(file);
+        }
+    }
+}
+
+
 load('images/flickr/kitty.jpg');
 $('input[type=range]').change(_.debounce(function(){
     $(this).next('.value').text($(this).val());

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,9 @@ body {`
`8`	`8`	`p {`
`9`	`9`	`max-width: 900px;`
`10`	`10`	`}`
	`11`	`+input[type=file] {`
	`12`	`+ display: block;`
	`13`	`+}`
`11`	`14`	`input[type=range] {`
`12`	`15`	`width: 300px;`
`13`	`16`	`}`