Today, playing with my Google Chrome browser (which, btw I do so frequently ;) ) I observered that dragging file from my desktop and dropping them onto a HTML file upload input ( ) was actually selecting the file. In other words, this drag-and-drop is equivalent to clicking the file upload button, browsing the local file explorer and choosing the file. Isn't this great ?

Going beyond this simple observation

After observing this mysterious phenomenon, I wondered if it couldn't be possible to detect this action and submit the form (assuming we have our file upload input wrapped inside a form), having the file sent to the server.
I wrote a simple HTML test file and noticed that binding a handler to a file upload input's onchange event was doing exactly that !
This is my test scripts :



Once you have done this, you can imagine what's next : handling the file upload from the server, saving the file, displaying it if necessary, ....

Make sure you style the input element properly, taking into accound it's size (200px X 200px in my example).

Going further beyond
You can even set you input's opacity to 0 (zero) and put an image bellow or any visuel are text message saying : "Drag and drop file here to upload it" ....

Note :
  1. This works well in Chrome but not in my version of Firefox (3.6.13) which actaully tries to open the file you drop onto the page.
  2. HTML5 brings an implementation of drag-and-drop you can test here assuming you have the rigth browser (you can see your browser's HTML5 support here : http://html5test.com).