Many native desktop applications provide an alternative way to open files by just dragging them over the application. In order to implement this functionality, we can take advantage of HTML5 APIs. As this is actually beyond the purpose of the book but still very useful, I will report an example to simplify the task:
<div id="dropFileHere">Drop File Here</div>
<style>
#dropFileHere { display: block;background: #f00; }
#dropFileHere.hover { background: #0f0; }
</style>
<script>
// Prevent default drop file behaviors
window.ondragover = function(e) { e.preventDefault(); };
window.ondrop = function(e) { e.preventDefault(); };
var holder = document.getElementById('dropFileHere');
holder.ondragenter = function() { this.className = 'hover'; };
holder.ondragleave = function() { this.className = ''; };
holder.ondrop = function(e) {
e.preventDefault();
this.className = '';
for (var i = 0; i < e.dataTransfer...