How do you make it obvious that the entire page is a drop zone?

Question

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.

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.

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.

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