Using a drag-and-drop file area
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.
Note
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.
How to do it...
Let's write the code.
We're going to create an HTML page with a drop area. To make the area easier to drop to, we're going to add some padding, margin, and border to it.
<!DOCTYPE HTML> <html> <head> <title>File API example</title> <style type="text/css...
