add button for image import

index.html

@@ -30,6 +30,8 @@
 			</div>
 		</div>
 		<div class="export-wrapper">
+			<button id="import-button" class="button">import image</button>
+			<input type="file" id="import-input" accept="image/*" />
 			<button id="save-button" class="button">export image</button>
 			<a id="png-button" download="glitched-image.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a>
 		</div>

scripts/main.js

@@ -20,6 +20,7 @@ require(
 		'src/controls',
 		'src/export-png',
 		'src/save-button',
+		'src/import-button',
 		'util/feature-test',
 		'lib/signals-1.0.0',
 		'lib/html5slider'
@@ -31,6 +32,7 @@ require(
 		controls,
 		png,
 		save_button,
+		import_button,
 		testFeatures,
 		Signal
 	)
@@ -55,6 +57,7 @@ require(
 			controls.init( shared );
 			png.init( shared );
 			save_button.init( shared );
+			import_button.init( shared );
 			image.init( shared );
 		}
 

scripts/src/import-button.js

@@ -0,0 +1,65 @@
+/*global define*/
+define(
+	[ 'util/trigger-event' ],
+	function( triggerEvent )
+	{
+		var feature;
+		var signals;
+		var import_button;
+		var import_input;
+		var file_reader;
+		var image;
+		var file_loading = false;
+		var allowed_file_types = [ 'image/png', 'image/jpg', 'image/jpeg' ];
+
+		function init( shared )
+		{
+			signals = shared.signals;
+			feature = shared.feature;
+
+			// http://www.html5rocks.com/en/tutorials/file/dndfiles/
+			if ( feature['file-api' ] )
+			{
+				file_reader = new FileReader();
+
+				import_button = document.getElementById( 'import-button' );
+				import_input = document.getElementById( 'import-input' );
+
+				file_reader.addEventListener( 'load', fileLoaded, false );
+				import_button.addEventListener( 'click', buttonClicked, false );
+				import_input.addEventListener( 'change', fileSelected, false );
+			}
+		}
+
+		function buttonClicked( event )
+		{
+			event.preventDefault();
+
+			if ( ! file_loading )
+			{
+				triggerEvent( import_input, 'click' );
+			}
+		}
+
+		function fileSelected( event )
+		{
+			var files = event.target.files;
+
+			if (
+				files[0] &&
+				files[0].type &&
+				allowed_file_types.indexOf( files[0].type ) !== -1
+			)
+			{
+				file_reader.readAsDataURL( files[0] );
+			}
+		}
+
+		function fileLoaded( event )
+		{
+			signals['set-new-src'].dispatch( event.target.result );
+		}
+
+		return { init: init };
+	}
+);

scripts/util/trigger-event.js

@@ -0,0 +1,71 @@
+/*global define*/
+define(
+	function()
+	{
+		// http://stackoverflow.com/a/2381862/229189
+		function triggerEvent( node, event_name )
+		{
+			var doc;
+
+			if ( node.ownerDocument )
+			{
+				doc = node.ownerDocument;
+			}
+
+			else if ( node.nodeType === 9 )
+			{
+				doc = node;
+			}
+
+			else
+			{
+				throw new Error('Invalid node passed to fireEvent: ' + node.id);
+			}
+
+			if ( node.fireEvent )
+			{
+				// IE-style
+				var event = doc.createEventObject();
+
+				event.synthetic = true;
+
+				node.fireEvent( 'on' + event_name, event );
+			}
+
+			else if ( node.dispatchEvent )
+			{
+				var event_class = '';
+
+				switch ( event_name )
+				{
+					case 'click':
+					case 'mousedown':
+					case 'mouseup':
+						event_class = 'MouseEvents';
+						break;
+
+					case 'focus':
+					case 'change':
+					case 'blur':
+					case 'select':
+						event_class = 'HTMLEvents';
+						break;
+
+					default:
+						throw 'triggerEvent: Couldn’t find an event class for event ' + event_name + '.';
+						break;
+				}
+
+				var event = doc.createEvent( event_class );
+				var bubbles = event_name == 'change' ? false : true;  
+				
+				event.initEvent( event_name, bubbles, true );
+
+				event.synthetic = true;
+				node.dispatchEvent( event );
+			}
+		}
+
+		return triggerEvent;
+	}
+);

styles/global.css

@@ -89,6 +89,11 @@ a:hover
 		width: 100px;
 	}
 
+#import-input
+{
+	display: none;
+}
+
 #canvas
 {
 	clear: both;