diff --git a/stylesheets/example.css b/stylesheets/example.css
index c64a6d3..1e154ba 100644
--- a/stylesheets/example.css
+++ b/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;
diff --git a/v1.0.0-beta.1/examples/file-input/index.html b/v1.0.0-beta.1/examples/file-input/index.html
new file mode 100644
index 0000000..e87b172
--- /dev/null
+++ b/v1.0.0-beta.1/examples/file-input/index.html
@@ -0,0 +1,104 @@
+---
+layout: examples
+title: Demo with live-stream
+showInMenu: false
+---
+
+
+
+ Click the button next to the input-field
+ to select a file or snap a picture This example demonstrates the following features:
+ Scan barcode to input-field
+
+
+
+
+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();
+
+
+
+
+<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"> </button>
+ <input type="file" id="file" capture/>
+ </div>
+</form>
+
+
+