With HTML5 we have another alternative for reading user files: we can use drag-and-drop areas. Often users find drag-and-drop intuitive and prefer it to other editing and manipulation methods.
Drag-and-drop also enable the user to drag elements from a different window or tab into ours, meaning they have more uses than regular file upload buttons.
In this recipe, we're going to make a drag-and-drop area for images. It will work both with dragged files and with images dragged from a different window or tab.
More information about the HTML5 drag-and-drop specification can be found at http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html.
Let's write the code.