Prevent Browser from Loading a Drag & Drop File

In Programming

Coding

Scroll this

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:

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.

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.

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

References

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: