Prevent Browser from Loading a Drag & Drop File

In Programming


Scroll this


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:

Drop a file outside the dropzone area
Drop a file outside the dropzone area

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


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.


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

Now, all works as expected.

Prevent accidental drops outside dropzone area
Prevent accidental drops outside dropzone area


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.

Submit a comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: