How to get files from angular 2 onDrop event?

The event onDrop event fires only when onDragOver has preventDefault() and stopPropagation() methods run on event.

HTML

<div    (drop)="onDrop($event)"    (dragover)="onDragOver($event)">    Drop target</div>

DropComponent.ts

export class DropComponent {    onDrop(event) {        event.preventDefault();    }    onDragOver(event) {        event.stopPropagation();        event.preventDefault();    }}

UPDATE

This is required because by default the browser prevents anything from happening while dropping onto the HTML element. See more atMDN - Defining a valid drop zone

Here is the complete code for drag and drop in Angular 2/4/6 :

drag.component.ts:

import { Component } from '@angular/core';@Component({  selector: 'drag-root',  templateUrl: './drag.component.html',  styleUrls: ['./drag.component.css']})export class AppComponent {  allowDrop(ev) {    ev.preventDefault();  }  drag(ev) {    ev.dataTransfer.setData("text", ev.target.id);  }  drop(ev) {    ev.preventDefault();    var data = ev.dataTransfer.getData("text");    ev.target.appendChild(document.getElementById(data));  }}

drag.component.html:

<h2>Drag and Drop</h2><div  id="div1"       (drop)="drop($event)"       (dragover)="allowDrop($event)">      <img       src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350"       draggable="true"       (dragstart)="drag($event)"       id="drag1"      width="88"       height="31"></div><div id="div2"   (drop)="drop($event)"   (dragover)="allowDrop($event)"></div>

drag.component.css:

#div1, #div2 {    float: left;    width: 100px;    height: 35px;    margin: 10px;    padding: 10px;    border: 1px solid black;}

Snapshots:

You could wrap the onDrop functionality into a reusable directive. Like this:

https://gist.github.com/darrenmothersele/7afda13d858a156ce571510dd78b7624

Apply this directive to an element:

<div (appDropZone)="onDrop($event)"></div>

The event is fired with a JavaScript array of the dropped Files. So, your onDrop implementation in the component looks something like this:

onDrop(files: FileList) {  console.log({ files });}