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:


|--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.


  • As a further comment on this, random google services support drag and drop, like tagging emails in gmail. There's no way to discover this in the UI. Commented Dec 7, 2011 at 5:24

3 Answers 3


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

Box.net Drag Drop Upload

  • Google Docs does something similar for their drag and drop. It fails to work in any version of Firefox with no error message saying it fails. I bet it only works in Google Chrome because they want to promote their own browser.
    – JoJo
    Commented Feb 18, 2011 at 18:14

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.


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.