CODEWITHSUNDEEP
angularangular2-template
Kliment
Kliment

Reputation: 2270

drop event not working angular 2

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.

Upvotes: 23

Views: 19614

Answers (3)

David J
David J

Reputation: 1098

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()
  }

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657148

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

Upvotes: 45

Mohy Eldeen
Mohy Eldeen

Reputation: 1330

add this on your dragover and dragend

return false;

@He is already doing what you said

Upvotes: 3

Related Questions