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.

Answer 1

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

Answer 2

add this on your dragover and dragend

return false;

@He is already doing what you said