geekman/dragNdrop.html

## dragNdrop.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>drag &amp; drop</title>

	<style>
		html, body {
			margin: 0;
			padding: 0;
			/* if height is 100%, h1's margin will eat into this */
			height: 98%;
		}

		#pagewrapper {
			zz-background-color: #eee; /* for easier debugging */
			position:relative;
			padding: 0 1em;
			min-height: 100%;
		}

		h1, h2, h3, p, input, body, div, span { font-family: Arial, sans-serif; }

		input {
			display: block;
			margin: 1em 0;
		}

		.overlay {
			display: none;
			position: fixed;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: rgba(0,0,0,0.4);
		}

		/* overlay's children should not fire any events */
		.overlay * {
			pointer-events: none;
		}

		.overlay-content {
			color: #fff;
			text-shadow: 0px 0px 15px rgba(0,0,0,0.6);
			text-align: center;
			margin: 15% auto;
			padding: 20px;
			width: 80%;
		}
	</style>
</head>

<body>
	<!-- drop hint overlay -->
	<div class="overlay">
		<div class="overlay-content">
			<h1>drop files here</h1>
		</div>
	</div>

	<div id="pagewrapper">
		<h1>Drag &amp; Drop Test</h1>
		<p>emulates gist.github.com</p>

		<div class="file">
			<input type="text" id="filename" placeholder="filename">
			<textarea rows="25" cols="80"></textarea>
		</div>
	</div>

	<script>
		if (typeof window.FileReader !== 'undefined') {
			// adds a new file to the DOM tree
			function newFile() {
				var node = document.querySelector('.file');
				var newNode = node.cloneNode(true);
				node.parentNode.insertBefore(newNode, null);
				return newNode;
			}

			var hint = document.querySelector('.overlay');

			function showHint(ev) { hint.style.display = 'block'; return false; }
			function hideHint(ev) { hint.style.display = 'none';  return false; }

			var e = document.body;
			e.ondragenter = showHint;

			// suppress default behaviour
			e.ondragover = function(ev) { ev.preventDefault(); return false; };

			// only overlay should receive dragleave events since body has many
			// elements that will trigger as the user moves over page elements
			hint.ondragleave = hideHint;
			hint.ondragend = hideHint;

			e.ondrop = function(ev) {
				hideHint();
				ev.preventDefault();

				var files = ev.dataTransfer.files;

				for (var i = 0; i < files.length; i++) {
					var f = files[i];
					console.log(f);

					if (f.type.indexOf('text/') === 0) {
						var fileElem = newFile();
						fileElem.querySelectorAll('input')[0].value = f.name;

						var r = new FileReader();
						(function(textarea) {
							r.onload = function(ev) { textarea.value = ev.target.result; }
						})(fileElem.querySelectorAll('textarea')[0]);
						r.readAsText(f);
					}
				}
			};
		}
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>drag & drop</title>

	<style>
	html, body {
	margin: 0;
	padding: 0;
	/* if height is 100%, h1's margin will eat into this */
	height: 98%;
	}

	#pagewrapper {
	zz-background-color: #eee; /* for easier debugging */
	position:relative;
	padding: 0 1em;
	min-height: 100%;
	}

	h1, h2, h3, p, input, body, div, span { font-family: Arial, sans-serif; }

	input {
	display: block;
	margin: 1em 0;
	}

	.overlay {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0,0,0,0.4);
	}

	/* overlay's children should not fire any events */
	.overlay * {
	pointer-events: none;
	}

	.overlay-content {
	color: #fff;
	text-shadow: 0px 0px 15px rgba(0,0,0,0.6);
	text-align: center;
	margin: 15% auto;
	padding: 20px;
	width: 80%;
	}
	</style>
	</head>

	<body>
	<!-- drop hint overlay -->
	<div class="overlay">
	<div class="overlay-content">
	<h1>drop files here</h1>
	</div>
	</div>

	<div id="pagewrapper">
	<h1>Drag & Drop Test</h1>
	<p>emulates gist.github.com</p>

	<div class="file">
	<input type="text" id="filename" placeholder="filename">
	<textarea rows="25" cols="80"></textarea>
	</div>
	</div>

	<script>
	if (typeof window.FileReader !== 'undefined') {
	// adds a new file to the DOM tree
	function newFile() {
	var node = document.querySelector('.file');
	var newNode = node.cloneNode(true);
	node.parentNode.insertBefore(newNode, null);
	return newNode;
	}

	var hint = document.querySelector('.overlay');

	function showHint(ev) { hint.style.display = 'block'; return false; }
	function hideHint(ev) { hint.style.display = 'none'; return false; }

	var e = document.body;
	e.ondragenter = showHint;

	// suppress default behaviour
	e.ondragover = function(ev) { ev.preventDefault(); return false; };

	// only overlay should receive dragleave events since body has many
	// elements that will trigger as the user moves over page elements
	hint.ondragleave = hideHint;
	hint.ondragend = hideHint;

	e.ondrop = function(ev) {
	hideHint();
	ev.preventDefault();

	var files = ev.dataTransfer.files;

	for (var i = 0; i < files.length; i++) {
	var f = files[i];
	console.log(f);

	if (f.type.indexOf('text/') === 0) {
	var fileElem = newFile();
	fileElem.querySelectorAll('input')[0].value = f.name;

	var r = new FileReader();
	(function(textarea) {
	r.onload = function(ev) { textarea.value = ev.target.result; }
	})(fileElem.querySelectorAll('textarea')[0]);
	r.readAsText(f);
	}
	}
	};
	}
	</script>
	</body>
	</html>