I dev’d using Chrome, and it may have issues with FF and IE — I dunno…didn’t spend any time trying them, but feel free to use it as a starter project for drag-n-drop fileupload. It also includes optional md5 calculation in JavaScript — can send all the file metadata as additional post XML (deserialized with JAXB), and includes progress bar polling:

step 1: $ git clone git://github.com/davisford/kickstarter.git
step 2: $ mvn jetty:run
step 3: Open chrome http://localhost:8080
step 4: drag-n-drop files
step 5: submit button
step 6: …there is no step 6

You can pass custom headers in the XHR request e.g.

xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("X-File-Size", file.size);

Then on the server side just look for those headers to get the file info.

This doesn’t work in IE.

…what if i’d like to check which is the extension of the file i’m going to upload?

You can check a files mime type from within the File object by using the type attribute e.g.

event.dataTransfer.files[0].type

If you drop an image it will populate the type with image/jpg or png or gif. With that information you can then do a check and force it to only accept certain files. If a files mime type isn’t known the type attribute is an empty string.

A question for you: what if i’d like to check which is the extension of the file i’m going to upload? in your opinion, can i know it before actually doing the the post? I googled a lot but i can’t find how to ask xhr object the filename of the one i’m uploading.