Why doesn't preventDefault work for the drop event?

Question

JavaScript

I work on Angular 7 and faced such a problem - I can't implement drag n drop. preventDefault doesn't work and the file just opens in the browser.
In general, the markup in the component is as follows:

<div id="drop-area" (dragover)="preventDefaults($event)" (drop)="handleDrop($event)" (ngClass)="highlight">
...
</div>

And the drop event handler itself:

preventDefaults(e){

    e.preventDefault();
    e.stopPropagation();

}

handleDrop(e){

    preventDefaults(e);
    console.log(e.dataTransfer.files);

}

Answer 1

e.preventDefault() is needed not only on the drop event, but also on the dragover
https://stackoverflow.com/questions/8414154/html5-...