5

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.

Andrew Zaitsev
  • 51
  • 1
  • 7
  • 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

1 Answers1

11

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);

More Useful link here for React

Here is the same question for drag and drop

danronmoon
  • 3,814
  • 5
  • 34
  • 56
Mayur Kukadiya
  • 2,461
  • 1
  • 25
  • 58