0

I'm trying to create a file drag and drop upload. I've created the div container with the dragenter, dragleave and drop events with HostListener in an Angular Directive. The dragenter and the dragleave event are working, but in the drop event the event.preventDefault() is not working. My event code:

@HostListener('drop', ['$event']) onDrop = (event): void => {
    event.preventDefault();
}

I also tried to add the event with (drop)="function($event)" inside the HTML DOM but that didn't work either.

ScrLurker
  • 3
  • 3
  • What is happening that should not be happening? Are you sure that `preventDefault` will stop this behavior? It's possible that there is another event that is triggering off of `drop`. – Explosion Pills Dec 30 '20 at 21:15
  • Sorry forgot to tell. When I drag an image on the div container with the events it will open the image in my browser (in chrome it opens a new tab, in firefox it opens in the same tab) or when I drag any other file format that is not supported by the browser it'll download it. And there is no other event, at least I know of, that could prevent it. I just created that angular component and have nothing else in it that could prevent it. – ScrLurker Dec 30 '20 at 21:20
  • This question might help you: https://stackoverflow.com/questions/35274028/stop-mouse-event-propagation – Gunnar B. Dec 30 '20 at 22:08
  • thank you, but that didn't help either :( but the event is definetly firing, I've tested it on an input of type "file". But on the div itself it still opens the image in my browser :/ – ScrLurker Dec 30 '20 at 22:27
  • I've created a new angular project, removed everything in app.component.html, created a div ```
    ``` and the code ```dropZoneEvent($event: DragEvent) {$event.preventDefault(); }``` and some css for background color and for the size... still not working... what am I doing wrong??? :(     – ScrLurker Dec 30 '20 at 22:46

1 Answers1

0

From MDN website:

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

So Try use event.stopPropagation() or event.stopImmediatePropagation() instead.

Nave Tseva
  • 371
  • 2
  • 6
  • 16
  • Thank you for your answer, but unfortunately that doesn't work either. I've tried them all alone and all together but it's still opening the image. Can I somehow test if the event is triggering? In firefox nothing happens of course because the image opens in the same tab, but in chrome? The image there opens in a new tab but I see nothing in the console when I console log anything....? :/ but it should because dragenter and dragleave are working fine as well and I've added the drop event the same way... – ScrLurker Dec 30 '20 at 21:34
  • Actually no idea if it even should work, but if I do it in the html file like this: ```
    ``` it doesn't work either with all three (preventDefault, stopPropagation, stopImmediatePropagation). And the div element has no child elements so that can also not be the reason
     – ScrLurker Dec 30 '20 at 21:39