As a continuation of previous article about new issues in html5, I found a demo where file upload is already working with usual drag and drop on to the browser Firefox 3.6. Mostly its all draft and hacks right now. If you look at the code, you can see browser-specific params like

A file is send with similar ajax method sendAsBinary (). Since there are no confirmation, it may be a bit dangerous because user can accidentally send entire C: \Windows directory. So it still needs all kinds of filters and validations as to what specifically can be uploaded and how deep.

Jquery dnd-upload

I wrote two jquery-plugins - one to support Firefox 3.6 (Namoroka) HTML5 upload, and one to support Google gears. You can use both together..

The easiest option for gears:

$('#drop_area').uploadg({gate:'http://somesite.com/upload_here_path/'});

Note that the key received from the server the file is "file" (in PHP its $ _FILES [ "file"] respectively ). And here is an extended example of code initialization..

var dragndropConfig={
beforeLoad:function(){
this.gate=some_dynamic_file_upload_url+'?parentID='+SomeOtherDynamicObject.ID;

if(SomeDisableReason){
this.can_proceed=false;
}
},

onProgress:function(event) {
if (event.lengthComputable) {
var percentage = Math.round((event.loaded * 100) / event.total);
if (percentage < 100) {
$('#some_progress_div').html('Uploading file..'+percentage+'%');
}
}
},

onComplete:function(event,txt) {
$('#some_progress_div').html('done');
}
};
if (window.google && google.gears){
$('#drop_area').uploadg(dragndropConfig);
}
else{
$('#drop_area').upload5(dragndropConfig);
}

Attention, Google gears still has bugs associated with such loading and has apparently halted development state because of upcoming html5 features. Also Chromium doesn't seem to support event.dataTransfer.files listing and although it has items() method, object inside is of blob type and cannot be converted to binary/string...

See also plupload