Added MediaLoder utility for loading photos/videos by drag/drop or fi…

…le input

examples/displace/index.html

@@ -49,9 +49,11 @@
 		<!--<div id="thumbnail"></div>-->
 		<div id="prompt">
 			<p>Move mouse to change perspective.</p>
-			<p>Drag and drop a JPG file taken with Android Camera using Lens Blur option.</p>
+			<p>Drag and drop or select a JPG file taken with Android Camera using Lens Blur option.</p>
+			<input type="file" id="file" accept="image/jpeg"/>
 		</div>
 	</body>
+	<script type="text/javascript" src="../../util/medialoader.js"></script>
 	<script type="text/javascript" src="../../seriously.js"></script>
 	<script type="text/javascript" src="../../sources/seriously.depth.js"></script>
 	<script type="text/javascript" src="../../effects/seriously.displacement.js"></script>
@@ -92,56 +94,49 @@
 			];
 		}, false);
 
-		document.body.addEventListener('dragover', function (e) {
-			e = e || event;
-			e.preventDefault();
-			return false;
-		}, false);
-
-		document.body.addEventListener('drop', function (evt) {
-			var file = evt.dataTransfer.files[0],
-				reader,
+		medialoader = new MediaLoader(function (file) {
+			var reader,
 				element,
 				newMapSource;
 
-			evt.preventDefault();
-
-			if (file.type === 'image/jpeg') {
-				//load actual image
-				element = document.createElement('img');
-				//element.onload = resizeCanvas;
-				element.src = URL.createObjectURL(file);
-
-				//load depth map
-				reader = new FileReader();
-				reader.onload = function () {
-					try {
-						newMapSource = seriously.source('depth', reader.result);
-					} catch (e) {
+			//load actual image
+			element = document.createElement('img');
+			//element.onload = resizeCanvas;
+			element.src = URL.createObjectURL(file);
+
+			//load depth map
+			reader = new FileReader();
+			reader.onload = function () {
+				try {
+					newMapSource = seriously.source('depth', reader.result);
+				} catch (e) {
+				}
+				if (newMapSource) {
+					if (source) {
+						source.destroy();
 					}
-					if (newMapSource) {
-						if (source) {
-							source.destroy();
-						}
-						if (map) {
-							map.destroy();
-						}
-						map = newMapSource;
-						source = seriously.source(element);
-						displace.map = map;
-						displace.source = source;
-						target.width = source.width;
-						target.height = source.height;
-
-						//thumbnail.innerHTML = '';
-						//thumbnail.appendChild(map.original);
+					if (map) {
+						map.destroy();
 					}
-				};
-				reader.readAsArrayBuffer(file);
-			}
+					map = newMapSource;
+					source = seriously.source(element);
+					displace.map = map;
+					displace.source = source;
+					target.width = source.width;
+					target.height = source.height;
+
+					//thumbnail.innerHTML = '';
+					//thumbnail.appendChild(map.original);
+				}
+			};
+			reader.readAsArrayBuffer(file);
 
 			return false;
-		}, true);
+		}, {
+			input: '#file',
+			format: 'file',
+			types: ['image/jpeg']
+		});
 
 		seriously.go();
 	}());

util/medialoader.js

@@ -0,0 +1,136 @@
+/* global define */
+(function (root, factory) {
+	'use strict';
+
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define([], factory);
+	} else {
+		root.MediaLoader = factory();
+	}
+}(this, function () {
+	'use strict';
+
+	var typeRegex = /^[a-z\-]+/i,
+		typeElements = {
+			video: 'video',
+			audio: 'audio',
+			image: 'img'
+		};
+
+	function MediaLoader(callback, options) {
+		var target,
+			input,
+			format,
+			types;
+
+		function dragover(evt) {
+			evt.preventDefault();
+			return false;
+		}
+
+		function upload(file) {
+			var reader,
+				element,
+				type;
+
+			// reject unacceptable file types
+			if (types && types.indexOf(file.type) < 0) {
+				if (options.error) {
+					options.error(file.type);
+				}
+				return;
+			}
+
+			type = typeRegex.exec(file.type);
+			type = type && type[0];
+			if (format === 'file') {
+				callback(file);
+			} else if (format === 'contents' || !typeElements[type]) {
+				reader = new FileReader();
+				reader.onload = function () {
+					callback(reader.result, file);
+				};
+				reader.readAsArrayBuffer(file);
+			} else {
+				// format === 'element'
+				element = document.createElement(typeElements[type]);
+				element.src = URL.createObjectURL(file);
+				callback(element, file);
+			}
+		}
+
+		function drop(evt) {
+			evt.preventDefault();
+			if (evt.dataTransfer.files.length) {
+				upload(evt.dataTransfer.files[0]);
+			}
+			return false;
+		}
+
+		function fileInput(evt) {
+			if (evt.target.files.length) {
+				upload(evt.target.files[0]);
+			}
+		}
+
+		if (typeof callback === 'object') {
+			options = callback;
+			callback = options.callback;
+		}
+
+		if (!callback) {
+			throw new Error('MediaLoader does not work without a callback function');
+		}
+
+		if (!options) {
+			options = {};
+		}
+
+		types = options.types || [
+			'video/webm',
+			'video/mp4',
+			'video/ogg',
+			'audio/ogg',
+			'audio/mp3',
+			'image/jpeg',
+			'image/png'
+		];
+
+		format = options.format;
+
+		if (!options.target) {
+			target = document.body;
+		} else if (typeof target === 'string') {
+			target = document.querySelector(options.target);
+		} else {
+			target = options.target;
+		}
+
+		if (target) {
+			target.addEventListener('dragover', dragover, false);
+			target.addEventListener('drop', drop, true);
+		}
+
+		input = options.input;
+		if (input && typeof input === 'string') {
+			input = document.querySelector(input);
+		}
+		if (input) {
+			input.addEventListener('change', fileInput, false);
+		}
+
+		this.destroy = function () {
+			if (target) {
+				target.removeEventListener('dragover', dragover, false);
+				target.removeEventListener('drop', drop, true);
+			}
+
+			if (input) {
+				input.removeEventListener('change', fileInput, false);
+			}
+		};
+	}
+
+	return MediaLoader;
+}));