drop event not working angular 2

Question

I'm building upload component in angular 2 and i stumble into problem. (drop) event is not working. This is my implementation

<div
class="input-upload"
*ngIf="status != 'finished'"
(drop)="onDrop($event)"
(dragenter)="dragenter()"
(dragleave)="dragleave()"
(dragover)="dragover()"
[ngClass]="{'drag-over': dragOver | async}"
>

onDrop(event: any) {
event.preventDefault();
event.stopPropagation();
console.log(event)
}

Am i doing something wrong? I even put non existing function in (drop) event and angular is not giving error.

Günter Zöchbauer · Accepted Answer · 2020-04-22T02:52:31.260

44

You need to call event.preventDefault() in dragOver(event) to inform the browser that the currently hovered element is a valid drop target.

See also https://developer.mozilla.org/en-US/docs/Web/Events/drop

edited Apr 22 '20 at 02:52

answered Feb 01 '16 at 17:42

Günter Zöchbauer

623,577
216
2,003
1,567

Mohy Eldeen · Answer 2 · 2016-02-29T23:51:51.213

3

add this on your dragover and dragend

return false;

@He is already doing what you said

edited Feb 29 '16 at 23:51

answered Feb 29 '16 at 23:46

Mohy Eldeen

1,261
2
13
24

1

He is doing it in `onDrop` but not in `dragOver()` – Günter Zöchbauer Mar 01 '16 at 05:21
1

Got it. Sorry did not see that. With this, he may still need to return false – Mohy Eldeen Mar 01 '16 at 23:42
[event.preventDefault() vs return false](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) Worth a read. – Jared Oct 13 '16 at 18:55
@Jared in Angular returning false is just calling `preventDefault` – Günter Zöchbauer Apr 10 '17 at 07:59

score 0 · Answer 3 · answered Feb 08 '23 at 14:11

After reviewing the other answers I was able to get it to work, but I was a little confused on putting the pieces together. This is the working HTML and TypeScript as of Angular 15.

The HTML:

<div (drop)="dropHandler($event);" (dragover)="dragOver($event)">
<p>Drag one or more files to this <i>drop zone</i>.</p>
</div>

The TypeScript:

  dropHandler(event: Event) {
    event.preventDefault()
    console.log(event)
  }
  
  dragOver(event: Event) {
    event.preventDefault()
  }

drop event not working angular 2

3 Answers3