How to detect file drag on HTML page

Question

I can detect if a file is being dragged on a div by listening to 'dragover' event. But how can I detect if a file is being dragged over the whole HTML page? document.body does not seem to raise the 'dragover' event.

What I intend to do is as soon as a file is dragged over a page, I'll show a hidden div to drop the file on. Just like Gmail.

Answer 1

Make a wrapper <div> with height:100% that contains your entire page and handle its dragover event.