<!doctype html>
<html>
	<head>
		<title>Dropping file into dropzone</title>
		<style type="text/css">
span { display: inline-block; height: 100px; width: 100px; background: orange; }
span + span { background: blue; }
		</style>
		<script type="text/javascript">
window.onload = function () {
	var drag = document.getElementsByTagName('span')[0];
	drag.ondragstart = function (e) {
		e.dataTransfer.setData('text','PASS');
		e.dataTransfer.effectAllowed = 'copy';
		var filein = document.getElementsByTagName('input')[0];
		if( !filein.files ) {
			document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.';
			return;
		}
		if( !filein.files[0] ) {
			document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.';
			return;
		}
		var thefile = filein.files[0];
		try {
			e.dataTransfer.items.add(thefile);
		} catch(err) {
			document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file';
			e.preventDefault();
			return;
		}
		if( e.dataTransfer.files.length != 1 ) {
			document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store';
			e.preventDefault();
			return;
		}
	};
	document.getElementsByTagName('span')[1].ondrop = function (e) {
		e.preventDefault();
		if( document.getElementsByTagName('p')[0].innerHTML ) { return; }
		if( e.dataTransfer.files.length != 1 ) {
			document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store during drop';
			e.preventDefault();
			return;
		}
		if( !window.FileReader ) {
			document.getElementsByTagName('p')[0].innerHTML = 'No FileReader constructor';
			e.preventDefault();
			return;
		}
		var reader = new FileReader();
		reader.onload = function () {
			if( !reader.result ) {
				document.getElementsByTagName('p')[0].innerHTML = 'No file data after load';
			} else if( !document.getElementsByTagName('p')[0].innerHTML ) {
				document.getElementsByTagName('p')[0].innerHTML = 'PASS';
			}
		};
		reader.readAsBinaryString(e.dataTransfer.files[0]);
		setTimeout(function () {
			if( !reader.result ) {
				document.getElementsByTagName('p')[0].innerHTML = 'No file data after timeout';
			}
		},1000);
	};
};
		</script>
	</head>
	<body>
		<ol>
			<li>Select a non-empty plain text file on your computer using the following input: <input type="file"></li>
			<li>Drag the orange square onto the blue square and release it:<br><span draggable="true"></span> <span dropzone="copy file:text/plain"></span><br>
			If a prompt appears, accept it.</li>
			<li>Fail if new text does not appear below.</li>
		</ol>
		<p></p>
		<noscript><p>Enable JavaScript and reload</p></noscript>
	</body>
</html>