How to prevent to open new tab when I drag and drop image on the Chrome browser in JavaScript?

Question

I have implemented drag and drop feature to my React app. but when I drag and drop image into application. it always opens new tab, but anyway the drag and drop is working well. I need only to prevent to open new tab.

Does this answer your question? [Prevent browser from loading a drag-and-dropped file](https://stackoverflow.com/questions/6756583/prevent-browser-from-loading-a-drag-and-dropped-file) — Thomas Potaire, Jan 12 '22 at 20:11

score 3 · Accepted Answer · edited May 18 '22 at 20:27

3

You should add preventDefault() on all dragover and drop events handlers. Example:

window.addEventListener("dragover",function(e){
  e = e || event;
  e.preventDefault();    <=================
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();    <=================
},false);

How to prevent to open new tab when I drag and drop image on the Chrome browser in JavaScript?

1 Answers1