Drag-and-drop file upload in Google Chrome/Chromium and Safari?

Question

Drag-and-drop file uploading can be done in Firefox 3.6.

A Google search for html5 drag-and-drop file uploading -gmail gives things like:

• Native Drag +

Answer 1

Set multiple attribute like:

input type="file" name="file1" multiple="multiple" class="DropHere"

and use this CSS DropHere class:

.DropHere
{
    height: 100px;
    padding: 3px;
    border: 2px dashed #555;
    border-radius: 5px;
    cursor: default;
    background-image:url("data:image/svg+xml;utf8, ");
    background-repeat: no-repeat;
}

The file field will now look like:

If you use asp.net you might also like this article I wrote "Multiple file upload with progress bar and drag and drop": http://www.codeproject.com/Articles/818561/Multiple-file-upload-with-progress-bar-and-drag-an