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 a load and has apparently halted development state because of upcoming html5 features.

See also plupload