Basic HTML5 dropping file demo

Just cooked up this demo HTML file showing how to build a web page that does something to the contents of a file that’s dropped on to it. There’s lots of approaches and tutorials for how to do this, this one is mine.

The challenge is that most of the docs I found dated back to 2010 when drag-and-drop was a bold new idea and was fraught with peril. Now it’s pretty simple and just writing the obvious code works in Chrome, Firefox, and Safari. (I hear there’s another browser but I’m unable to run it, so who cares?)

The most useful document I found while figuring this out was this MDN article. The key concept is that there’s a “drop” event in the DOM. By default that causes the browser to navigate; you override that to provide your own behavior. The FileReader API is also useful, beware that it does not work in IE 9. If I cared I’d probably stop writing my own raw code and use some jQuery plugin or other library to provide compatibility.