kevmo/dead-drop.html

## dead-drop.html
<!doctype html>
<html>
<head>
    <style>
        .hidden { display: none; }
        #dead-drop { height: 200px; width: 200px; border: 1px solid #333; }
    </style>
</head>
<body>
    <form enctype="multipart/form-data" action="#" method="post">
        <input type="file" name="file" class="hidden" id="dead-drop-accept" />
        <div id="dead-drop"></div>
        <input type="submit" value="Submit"/>
    </form>

    File: {{ file }}

    <script>
        function cancel(event) {
          if (event.preventDefault) event.preventDefault();
          return false;
        }

        _supported = (function() {
            // Method for detection shamelessly borrowed from Modernizr
            div = document.createElement('div')
            return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)
        })()

        trgt = document.getElementById('dead-drop');
        file = document.getElementById('dead-drop-accept');

        // "Cancel" these, so the browser doesn't use its default behavior.
        trgt.addEventListener('dragover', cancel);
        trgt.addEventListener('dragenter', cancel);

        trgt.addEventListener('drop', function(e) {
            e.preventDefault();
            e.stopPropagation();

            file.files = e.dataTransfer.files;
            trgt.innerHTML = 'Dropped file.';
        });
    </script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<style>
	.hidden { display: none; }
	#dead-drop { height: 200px; width: 200px; border: 1px solid #333; }
	</style>
	</head>
	<body>
	<form enctype="multipart/form-data" action="#" method="post">
	<input type="file" name="file" class="hidden" id="dead-drop-accept" />
	<div id="dead-drop"></div>
	<input type="submit" value="Submit"/>
	</form>

	File: {{ file }}

	<script>
	function cancel(event) {
	if (event.preventDefault) event.preventDefault();
	return false;
	}

	_supported = (function() {
	// Method for detection shamelessly borrowed from Modernizr
	div = document.createElement('div')
	return ('draggable' in div) \|\| ('ondragstart' in div && 'ondrop' in div)
	})()

	trgt = document.getElementById('dead-drop');
	file = document.getElementById('dead-drop-accept');

	// "Cancel" these, so the browser doesn't use its default behavior.
	trgt.addEventListener('dragover', cancel);
	trgt.addEventListener('dragenter', cancel);

	trgt.addEventListener('drop', function(e) {
	e.preventDefault();
	e.stopPropagation();

	file.files = e.dataTransfer.files;
	trgt.innerHTML = 'Dropped file.';
	});
	</script>
	</body>
	</html>