Problem

We have a page that contains a drop area to upload files. However, if accidentally the dropped file is outside the designated drop area, the browser tends to open and display that file.

Here is an example dropping an image outside drop area:

As you can see, the dropped image takes over the browser, when dropped outside the “Upload Your Media” drop box.

Research

We can add event listeners for dragover and drop and call preventDefault() to stop the default behavior, thus a file cannot be dropped anymore into the browser window.

It works fine, no more accidental drops, but wait, we’re not able to drop any more into the designated dropzone area.

Solution

We’ll need to preventDefault() everywhere, except the actual dropzone.

Now, all works as expected.

References

• Stack Overflow: Prevent browser from loading a drag-and-dropped file

This is currently in use in one of the projects I am working on – Grafeeki.

Did you find the solution above useful or do you need help? Don’t hesitate to contact me or post a comment below.