We're building a feature where our users can upload files to their dashboards.

In addition to being able to view their files, I would like the users to be able to drag and drop files onto the page (this could also potentially be a modal depending on how much time we decide to allocate on this feature).

I could technically add a drop zone, but we're working with limited real estate. There are other elements on the page that I have not included in the quick mockup below. So with that mind, I was considering just making the entire page a drag and drop similar to Box, but I worry that the absence of a visible drop zone does not make it intuitive enough.

enter image description here

Dropbox, on the other hand, also has their entire page turn into a drop zone upon dragging files onto it, although they do have a visible and small drop zone at the top of their files list.

enter image description here

  • Questions with visual references in them make me happy.
    – JohnGB
    Apr 13, 2023 at 22:59

1 Answer 1


You're essentially dealing with the same problem that email applications have had for years. Gmail does a good job in handling this as soon as you try to drag an attachment over a new email. A visual "Drop files here" overlay appears with a clear border demarcating the drop zone. I would suggest doing the same thing, only setting the drop zone to whatever area is appropriate for your case, whether it's the entire page, or only a part of it.

Gmail drag and drop visuals

When it comes to letting your customers know that the area is a drop zone, it should be fairly simple given that you're suggesting the whole page. Something like

Drag and drop a file anywhere on this page to add it

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.