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

40

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

558,509
191
1,911
1,506

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,237
2
13
22

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

drop event not working angular 2

2 Answers2