gideondk/gist:1475806

## gistfile1.html
<html>
  <head>
    <title>Drag and drop Play2.0 Test</title>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' charset='utf-8'></script>
    <script type='text/javascript'>
		var dnd = {
			ready : function()
	        {
				$('div#uploadTarget')
					.bind(
					  'dragenter',
					  function(e) {
					    e.preventDefault();
					    e.stopPropagation();
					  }
					)
					.bind(
					  'dragover',
					  function(e) {
					    e.preventDefault();
					    e.stopPropagation();
					  }
					)
					.bind(
					  'drop',
					  function(e) {
					    if (e.originalEvent.dataTransfer.files.length) {
					      e.preventDefault();
					      e.stopPropagation();
					      dnd.upload(e.originalEvent.dataTransfer.files);
					    }
					  }
			  	);
	        },

	        upload : function(files)
	        {
				var http = new XMLHttpRequest();

				if (http.upload && http.upload.addEventListener) {
					http.upload.addEventListener(
					  'progress',
					  function(e) {
					    if (e.lengthComputable) {
							console.log((e.loaded * 100) / e.total);
					    }
					  },
					  false
					);

		            http.upload.addEventListener(
		              'load',
		              function(e) {
						  console.log("File loaded");
		              }, false
		            );
	            }

				if (typeof(FormData) != 'undefined') {
					var form = new FormData();

					form.append('path', '/');

					for (var i = 0; i < files.length; i++) {
					  form.append('file[]', files[i]);
					}

					http.open('POST', 'http://localhost:9000/raw_post/');
					http.send(form);
				}
	  	  	}
		}
    	$(document).ready(dnd.ready);

    </script>
</head>
<body>
  <div style="text-align: center" id="uploadTarget">
   	<p style="border:1px solid #777; width: 160px; padding: 10px;">Drop file(s) here!</p>
  </div>
</body>
</html>
	<html>
	<head>
	<title>Drag and drop Play2.0 Test</title>
	<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' charset='utf-8'></script>
	<script type='text/javascript'>
	var dnd = {
	ready : function()
	{
	$('div#uploadTarget')
	.bind(
	'dragenter',
	function(e) {
	e.preventDefault();
	e.stopPropagation();
	}
	)
	.bind(
	'dragover',
	function(e) {
	e.preventDefault();
	e.stopPropagation();
	}
	)
	.bind(
	'drop',
	function(e) {
	if (e.originalEvent.dataTransfer.files.length) {
	e.preventDefault();
	e.stopPropagation();
	dnd.upload(e.originalEvent.dataTransfer.files);
	}
	}
	);
	},

	upload : function(files)
	{
	var http = new XMLHttpRequest();

	if (http.upload && http.upload.addEventListener) {
	http.upload.addEventListener(
	'progress',
	function(e) {
	if (e.lengthComputable) {
	console.log((e.loaded * 100) / e.total);
	}
	},
	false
	);

	http.upload.addEventListener(
	'load',
	function(e) {
	console.log("File loaded");
	}, false
	);
	}

	if (typeof(FormData) != 'undefined') {
	var form = new FormData();

	form.append('path', '/');

	for (var i = 0; i < files.length; i++) {
	form.append('file[]', files[i]);
	}

	http.open('POST', 'http://localhost:9000/raw_post/');
	http.send(form);
	}
	}
	}
	$(document).ready(dnd.ready);

	</script>
	</head>
	<body>
	<div style="text-align: center" id="uploadTarget">
	<p style="border:1px solid #777; width: 160px; padding: 10px;">Drop file(s) here!</p>
	</div>
	</body>
	</html>