rcravens/html5_drag_drop_file_upload.php

## html5_drag_drop_file_upload.php
<?php
/*
  HTML5 Drag & Drop File Upload with Progress

  Borrowed from these original sources:

  http://webstandardssherpa.com/reviews/dissecting-gmails-email-attachments/

  http://www.script-tutorials.com/html5-drag-and-drop-multiple-file-uploader/

*/


if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // Something is being posted:

	echo "<br />_FILES<br />";
	var_dump($_FILES);

	exit;

}

?>
<html>
<head>
	<title>Upload Test</title>

	<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* SPECIFIC STYLES */
body{
	margin: 10px;
	background-color: #f2f2f2;
}

#wrap{
	margin: 0 auto;
	padding: 20px;
	width: 800px;
	min-height: 400px;
	text-align: center;
}

#target {
	background-color: #ffffff;
	border: 2px solid #e2e2e2;
	width: 400px;
	margin: 20px auto;
	color: #888;
	padding: 40px 0;
	font-size: 24px;
}

#info {
	width: 400px;
	margin: 20px auto;
	padding: 40px 0;
	display: none;
	text-align: left;
}

#info ul {
	list-style: none;
	margin: 20px 0;
	padding: 20px 10px;
	border: 1px solid #e2e2e2;
}
#info ul li {
	padding-bottom: 8px;
}
#info ul li span.name {
	padding: 0 5px;
}

canvas {
	background-color: #fff;
}

	</style>
	<meta http-equiv="cache-control" content="max-age=0" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
	<meta http-equiv="pragma" content="no-cache" />
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
	<div id="wrap">
		<h3>Upload via HTML5 Drag-n-Drop</h3>

		<div id="target">
			Drop Files Here
		</div>

		<div id="info">
			<ul id="files"></ul>

			<button id="clear">clear</button>
		</div>
	</div>

<script type="text/javascript">

(function(){

	var list = [];
	var bytes_uploaded = [];
	var index = 0;

	function processFiles(files) {

		if(!files || !files.length || list.length) {
			return;
		}

		console.log(files);

		index = -1;
		list = [];
		bytes_uploaded = [];

		var ul = $('#files');
		ul.html();
		var len=files.length;
		for(var i=0; i<len; i++) {
			list.push(files[i]);
			bytes_uploaded.push(10);

			var li = $('<li id="file' + i + '">');
			li.append('<span class="progress"><canvas width="200" height="20"></canvas></span>');
			li.append('<span class="name">' + files[i].name + '</span>');

			ul.append(li);
		}
		$('#info').slideToggle('fast');

		for(var i=0; i<len; i++){
			drawProgress(i);
		}

		uploadNext();
	}

	function uploadNext() {
		if(list.length){
			index++;
			if(index<list.length){
				var nextFile = list[index];
				uploadFile(nextFile);
			}
		}
	}

	function uploadFile(file) {
		var xhr = new XMLHttpRequest();
		xhr.open("post", "/upload/", true);
		xhr.onload = function() {
			console.log('onload');
			switch(this.status) {

				case 200: //request complete and successful
					handleComplete(file.size);
					console.log("Files uploaded");
					break;

				default: // request complete but with unexpected response
					console.log("Files not uploaded.");

			}
		};

		xhr.onerror = function() {
			console.log('onerror');
			handleComplete(file.size);
		}

		xhr.upload.onprogress = function(event) {
			console.log('onprogress');
			handleProgress(event);
		}

		xhr.upload.onloadstart = function(event) {
			console.log('onloadstart');
		}

		var formData = new FormData();
		formData.append('myfile', file);
		xhr.send(formData);
	}

	function drawProgress(i) {

		if(i==undefined){
			i = index;
		}
		console.log(i);

		var progress = bytes_uploaded[i]/list[i].size;

		var canvas = $('#file' + i + ' canvas');
		var width = canvas.width();
		var height = canvas.height();

		var context = canvas[0].getContext('2d');

		context.clearRect(0, 0, width, height);
		context.beginPath();
		context.strokeStyle = '#4b9500';
		context.fillStyle = '#4b9500';
		context.fillRect(0, 0, progress * width, height);
		context.closePath();

		context.font = '12px Verdana';
		context.fillStyle = '#000';
		context.fillText(Math.floor(progress*100) + '%', 50, 15);
	}

	function handleComplete(size) {
		bytes_uploaded[index] = size;
		drawProgress();
		uploadNext();
	}

	function handleProgress(event) {
		console.log(event);
		bytes_uploaded[index] = event.loaded;
		drawProgress();
	}

	function handleDrag(event) {
		event.preventDefault();
		event.stopPropagation();

		switch(event.type) {

			case "dragenter":
				document.body.className = "dragging";
				break;

			case "dragover":
				break;

			case "dragleave":
				document.body.className = "";
				break;

			case "drop":
				console.log('drop');
				if(event.target.id == "target") {
					console.log("Dropped %d files.", event.dataTransfer.files.length);
					processFiles(event.dataTransfer.files);
				}
				break;
		}
	}

	document.addEventListener("dragenter", handleDrag, false);
	document.addEventListener("dragover", handleDrag, false);
	document.addEventListener("dragleave", handleDrag, false);
	document.addEventListener("drop", handleDrag, false);

	console.log('listening. . . . ');

})();
</script>
</body>
</html>
	<?php
	/*
	HTML5 Drag & Drop File Upload with Progress

	Borrowed from these original sources:

	http://webstandardssherpa.com/reviews/dissecting-gmails-email-attachments/

	http://www.script-tutorials.com/html5-drag-and-drop-multiple-file-uploader/

	*/


	if ($_SERVER['REQUEST_METHOD'] === 'POST') {
	// Something is being posted:

	echo "<br />_FILES<br />";
	var_dump($_FILES);

	exit;

	}

	?>
	<html>
	<head>
	<title>Upload Test</title>

	<style type="text/css">
	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 \| 20110126
	License: none (public domain)
	*/
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
	line-height: 1;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}
	table {
	border-collapse: collapse;
	border-spacing: 0;
	}

	/* SPECIFIC STYLES */
	body{
	margin: 10px;
	background-color: #f2f2f2;
	}

	#wrap{
	margin: 0 auto;
	padding: 20px;
	width: 800px;
	min-height: 400px;
	text-align: center;
	}

	#target {
	background-color: #ffffff;
	border: 2px solid #e2e2e2;
	width: 400px;
	margin: 20px auto;
	color: #888;
	padding: 40px 0;
	font-size: 24px;
	}

	#info {
	width: 400px;
	margin: 20px auto;
	padding: 40px 0;
	display: none;
	text-align: left;
	}

	#info ul {
	list-style: none;
	margin: 20px 0;
	padding: 20px 10px;
	border: 1px solid #e2e2e2;
	}
	#info ul li {
	padding-bottom: 8px;
	}
	#info ul li span.name {
	padding: 0 5px;
	}

	canvas {
	background-color: #fff;
	}

	</style>
	<meta http-equiv="cache-control" content="max-age=0" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
	<meta http-equiv="pragma" content="no-cache" />
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	</head>

	<body>
	<div id="wrap">
	<h3>Upload via HTML5 Drag-n-Drop</h3>

	<div id="target">
	Drop Files Here
	</div>

	<div id="info">
	<ul id="files"></ul>

	<button id="clear">clear</button>
	</div>
	</div>

	<script type="text/javascript">

	(function(){

	var list = [];
	var bytes_uploaded = [];
	var index = 0;

	function processFiles(files) {

	if(!files \|\| !files.length \|\| list.length) {
	return;
	}

	console.log(files);

	index = -1;
	list = [];
	bytes_uploaded = [];

	var ul = $('#files');
	ul.html();
	var len=files.length;
	for(var i=0; i<len; i++) {
	list.push(files[i]);
	bytes_uploaded.push(10);

	var li = $('<li id="file' + i + '">');
	li.append('<span class="progress"><canvas width="200" height="20"></canvas></span>');
	li.append('<span class="name">' + files[i].name + '</span>');

	ul.append(li);
	}
	$('#info').slideToggle('fast');

	for(var i=0; i<len; i++){
	drawProgress(i);
	}

	uploadNext();
	}

	function uploadNext() {
	if(list.length){
	index++;
	if(index<list.length){
	var nextFile = list[index];
	uploadFile(nextFile);
	}
	}
	}

	function uploadFile(file) {
	var xhr = new XMLHttpRequest();
	xhr.open("post", "/upload/", true);
	xhr.onload = function() {
	console.log('onload');
	switch(this.status) {

	case 200: //request complete and successful
	handleComplete(file.size);
	console.log("Files uploaded");
	break;

	default: // request complete but with unexpected response
	console.log("Files not uploaded.");

	}
	};

	xhr.onerror = function() {
	console.log('onerror');
	handleComplete(file.size);
	}

	xhr.upload.onprogress = function(event) {
	console.log('onprogress');
	handleProgress(event);
	}

	xhr.upload.onloadstart = function(event) {
	console.log('onloadstart');
	}

	var formData = new FormData();
	formData.append('myfile', file);
	xhr.send(formData);
	}

	function drawProgress(i) {

	if(i==undefined){
	i = index;
	}
	console.log(i);

	var progress = bytes_uploaded[i]/list[i].size;

	var canvas = $('#file' + i + ' canvas');
	var width = canvas.width();
	var height = canvas.height();

	var context = canvas[0].getContext('2d');

	context.clearRect(0, 0, width, height);
	context.beginPath();
	context.strokeStyle = '#4b9500';
	context.fillStyle = '#4b9500';
	context.fillRect(0, 0, progress * width, height);
	context.closePath();

	context.font = '12px Verdana';
	context.fillStyle = '#000';
	context.fillText(Math.floor(progress*100) + '%', 50, 15);
	}

	function handleComplete(size) {
	bytes_uploaded[index] = size;
	drawProgress();
	uploadNext();
	}

	function handleProgress(event) {
	console.log(event);
	bytes_uploaded[index] = event.loaded;
	drawProgress();
	}

	function handleDrag(event) {
	event.preventDefault();
	event.stopPropagation();

	switch(event.type) {

	case "dragenter":
	document.body.className = "dragging";
	break;

	case "dragover":
	break;

	case "dragleave":
	document.body.className = "";
	break;

	case "drop":
	console.log('drop');
	if(event.target.id == "target") {
	console.log("Dropped %d files.", event.dataTransfer.files.length);
	processFiles(event.dataTransfer.files);
	}
	break;
	}
	}

	document.addEventListener("dragenter", handleDrag, false);
	document.addEventListener("dragover", handleDrag, false);
	document.addEventListener("dragleave", handleDrag, false);
	document.addEventListener("drop", handleDrag, false);

	console.log('listening. . . . ');

	})();
	</script>
	</body>
	</html>