Added file-input example

stylesheets/example.css

@@ -27,6 +27,13 @@
     width: 40px;
 }
 
+.icon-barcode {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTAgNGg0djIwaC00ek02IDRoMnYyMGgtMnpNMTAgNGgydjIwaC0yek0xNiA0aDJ2MjBoLTJ6TTI0IDRoMnYyMGgtMnpNMzAgNGgydjIwaC0yek0yMCA0aDF2MjBoLTF6TTE0IDRoMXYyMGgtMXpNMjcgNGgxdjIwaC0xek0wIDI2aDJ2MmgtMnpNNiAyNmgydjJoLTJ6TTEwIDI2aDJ2MmgtMnpNMjAgMjZoMnYyaC0yek0zMCAyNmgydjJoLTJ6TTI0IDI2aDR2MmgtNHpNMTQgMjZoNHYyaC00eiI+PC9wYXRoPjwvc3ZnPg==);
+}
+
 .overlay {
     overflow: hidden;
     position: fixed;

v1.0.0-beta.1/examples/file-input/index.html

@@ -0,0 +1,104 @@
+---
+layout: examples
+title: Demo with live-stream
+showInMenu: false
+---
+
+<link rel="stylesheet" type="text/css" href="{{ site.url }}{{ site.baseurl }}/stylesheets/prism.css" />
+<style>
+    input[type=file] {
+        display: none;
+    }
+</style>
+<section id="container" class="container">
+    <h3>Scan barcode to input-field</h3>
+    <p>Click the <strong>button</strong> next to the input-field
+        to select a file or snap a picture</p>
+    <div>
+        <form>
+            <div class="input-field">
+                <label for="isbn_input">EAN:</label>
+                <input id="isbn_input" class="isbn" type="text" />
+                <button type="button" class="icon-barcode button scan">&nbsp;</button>
+                <input type="file" id="file" capture/>
+            </div>
+        </form>
+    </div>
+    <p>This example demonstrates the following features:
+        <ul>
+            <li>Use static image as source</li>
+            <li>Configuring EAN-Reader</li>
+            <li>Use custom mount-point (Query-Selector)</li>
+        </ul>
+    </p>
+    <div class="source-code">
+        <h4>Source</h4>
+        <div class="collapsable-source">
+            <pre>
+                <code class="language-javascript">
+var Quagga = window.Quagga;
+var App = {
+    _scanner: null,
+    init: function() {
+        this.attachListeners();
+    },
+    decode: function(src) {
+        Quagga
+            .decoder({readers: ['ean_reader']})
+            .locator({patchSize: 'medium'})
+            .fromImage(src, {size: 800})
+            .toPromise()
+            .then(function(result) {
+                document.querySelector('input.isbn').value = result.codeResult.code;
+            })
+            .catch(function() {
+                document.querySelector('input.isbn').value = "Not Found";
+            })
+            .then(function() {
+                this.attachListeners();
+            }.bind(this));
+    },
+    attachListeners: function() {
+        var self = this,
+            button = document.querySelector('.input-field input + .button.scan'),
+            fileInput = document.querySelector('.input-field input[type=file]');
+
+        button.addEventListener("click", function onClick(e) {
+            e.preventDefault();
+            button.removeEventListener("click", onClick);
+            document.querySelector('.input-field input[type=file]').click();
+        });
+
+        fileInput.addEventListener("change", function onChange(e) {
+            e.preventDefault();
+            fileInput.removeEventListener("change", onChange);
+            if (e.target.files && e.target.files.length) {
+                self.decode(URL.createObjectURL(e.target.files[0]));
+            }
+        });
+    }
+};
+App.init();
+                </code>
+            </pre>
+        </div>
+        <div class="collapsable-source">
+            <pre>
+                <code class="language-html">
+&lt;form&gt;
+    &lt;div class=&quot;input-field&quot;&gt;
+        &lt;label for=&quot;isbn_input&quot;&gt;EAN:&lt;/label&gt;
+        &lt;input id=&quot;isbn_input&quot; class=&quot;isbn&quot; type=&quot;text&quot; /&gt;
+        &lt;button type=&quot;button&quot; class=&quot;icon-barcode button scan&quot;&gt;&amp;nbsp;&lt;/button&gt;
+        &lt;input type=&quot;file&quot; id=&quot;file&quot; capture/&gt;
+    &lt;/div&gt;
+&lt;/form&gt;
+                </code>
+            </pre>
+        </div>
+    </div>
+</section>
+
+<script src="../js/quagga.js" type="text/javascript"></script>
+<script src="index.js" type="text/javascript"></script>
+<script src="../js/prism.js"></script>

v1.0.0-beta.1/examples/file-input/index.js

@@ -0,0 +1,43 @@
+var Quagga = window.Quagga;
+var App = {
+    _scanner: null,
+    init: function() {
+        this.attachListeners();
+    },
+    decode: function(file) {
+        Quagga
+            .decoder({readers: ['ean_reader']})
+            .locator({patchSize: 'medium'})
+            .fromSource(file, {size: 800})
+            .toPromise()
+            .then(function(result) {
+                document.querySelector('input.isbn').value = result.codeResult.code;
+            })
+            .catch(function() {
+                document.querySelector('input.isbn').value = "Not Found";
+            })
+            .then(function() {
+                this.attachListeners();
+            }.bind(this));
+    },
+    attachListeners: function() {
+        var self = this,
+            button = document.querySelector('.input-field input + .button.scan'),
+            fileInput = document.querySelector('.input-field input[type=file]');
+
+        button.addEventListener("click", function onClick(e) {
+            e.preventDefault();
+            button.removeEventListener("click", onClick);
+            document.querySelector('.input-field input[type=file]').click();
+        });
+
+        fileInput.addEventListener("change", function onChange(e) {
+            e.preventDefault();
+            fileInput.removeEventListener("change", onChange);
+            if (e.target.files && e.target.files.length) {
+                self.decode(e.target.files[0]);
+            }
+        });
+    }
+};
+App.init();