Drag and drop files to your browser

The mechanism behind: the Ajax library, the DOM element wrapper and the Asset component are assuring most of the work (handling the upload and the callback process), the DDM detects the dragged files, then your browser is doing the rest, defining the interaction between your desktop and the file input (nicely styled of course).

By now, two browsers are playing well with the demo (Safari 4, Chrome 2+).

For the firefox browser use the folowing:
http://www.thecssninja.com/demo/drag-drop_upload/

Here’s the code :

Swell.Core.Event.add('upload', 'change', function() {
    $('loader').show();
    $('foorm').xhr(function() {
        var currentEl = $('upload').current();
        $('filelist').show();
        for (var i = 0, len = currentEl.files.length; i < len; i++) {
            $('filelist').appendHTML(currentEl.files.item(i).fileName + '
');
        }
        var imgs = this.responseText.split('|');
        new Swell.Core.Asset().load('img', imgs, function(img) {
            $('loader').hide();
            $(img).appendTo('image-container');
        });
    });
});

http://blog.justswell.org/drag-and-drop-files-from-your-desktop-to-your-browser-using-javascript/
http://www.webmonkey.com/2009/08/html_5_file_api_brings_drag-and-drop_file_uploads_to_the_web/