Prevent Browser from Loading a Drag-And-Dropped File

Prevent browser from loading a drag-and-dropped file

You can add a event listener to the window that calls preventDefault() on all dragover and drop events.

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?

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

Stopping a PDF file from opening on drag and drop

You need to prevent the default behavior from happening. Something like this worked for me...

HTML:

<div id="dropArea" ondrop="dragDrop(event)" ondragover="dragOver(event)" ondragleave="dragLeave(event)" onClick="selectFile(event)"></div>
<input type="file" name="file" id="fileSelectionButton" onChange="fileButtonChange()" />

JavaScript:

function dragOver(e) {
    e.preventDefault();
}

function dragLeave(e) {
    e.preventDefault();
}

function dragDrop(e) {
    e.preventDefault();
    var file = e.dataTransfer.files[0];
}

function selectFile(e) {
    $('#fileSelectionButton').click();
}

Disable dragging of a file system image into a browser.

The dataTransfer object has dropEffect and effectAllowed properties. Not exactly sure what the difference between them, but setting both to 'none' should help.

$(document).bind({
   dragenter: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var dt = e.originalEvent.dataTransfer;
     dt.effectAllowed = dt.dropEffect = 'none';
   },
   dragover: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var dt = e.originalEvent.dataTransfer;
      dt.effectAllowed = dt.dropEffect = 'none';
   }
});

See the http://jsfiddle.net/andreymir/H3RR7/embedded/result/ - drop allowed to rectangle only.

Drag and Drop Html 5 file upload - Prevent loading

Remove
$box.bind("dragleave", dragLeave);

Add this :
$box.bind("dragover", dragLeave);

it works charms .

Javascript drag and drop file in container: how to prevent `dragover` from being called many times causing delay?

I've tried your code in Chrome and Firefox. Both appear to work fine and does not cause any delay. The dragover event is supposed to fire while a file over the container (MDN).

In the sample code you linked the dragover event is also fired just like yours, but it isn't printed to the console. Does that page slow down your browser also?

You could try removing your console.log statement completely, or change your code to not log dragover events.

Actually, I now realize you are talking about the JSFiddle console. It appears that the console there is not able to keep up with the amount of console.log calls. Either refrain from logging dragover events or download your code from JSFiddle and open it in your browser.

---

Related Topics