Don't open image in browser when dropped into a window

Don't open image in browser when dropped into a window

Problem Description:

When I drag an image and drop it into an open browser window, the browser will (provided I didn’t drop the image into an input field) open this image in the browser. The address bar shows something like file:///Users/paul/Desktop/test_image.png.

Is there any way with e.g. HTML, CSS or JS to simply ignore this and not to open the image in the window?

I want to reach this behavior for specific sites I’m hosting. Not as general browser setting.

Solution – 1

Try this, it should work:

document.addEventListener('dragover', (e) => {
  e.preventDefault()
})

document.addEventListener('drop', (e) => {
  e.preventDefault()
})