Visually indicating that a website supports drag and drop?

Question

I'm building a system that requires file-uploading, and I'm wondering how I can indicate that the browser windows supports drag and drop. Since the feature is new to modern browsers, there's no user expectation of the ability.

I thought about this:

[UPLOAD BUTTON]

|---------------------------|
|--Drag files here----------|
|---------------------------|
|---------------------------|

with a color effect on the drag area, but that just seems inelegant. I could tooltip the upload button, but that might get annoying if it appears too quickly, and it could be useless if it doesn't appear quickly enough.

Thoughts?

Answer 1

A box with a dotted line could be a nice indication that files can be dragged to upload. The "drag files here" as you mentioned is probably very useful as well. Box.net does something like that for bulk upload and you may want to have a look at the jquery plugin pluload: http://www.plupload.com/example_queuewidget.php

Answer 2

Imgur does it with an "upload file" button and text that says drag and drop. Gmail and Outlook 2011 for Mac do it the same way--giving an outline or different background/border color when you drag a file over.

I think the dotted line or border/bg change is the most common pattern currently. I am not sure how that will let users visually know they should drag (vs using the upload button), but once they try/accidentally get it, the pattern seems consistent.

Answer 3

I'd go with text only as a first step. You could add from where people should drag the files. For example: "Drag and drop files here from your desktop".

The hint can be hidden on browsers that don't support the feature.

The change of color of the active area works fine e. g. in Google Mail. When a user already has a file attached to his mouse.

                                           .
                                 Drop the file(s) here
                                           .