import { Directive , Output , EventEmitter , HostBinding , HostListener } from '@angular/core' ; @ Directive ( { selector : '[appDragDrop]' } ) export class FileDragDropDirective { @ Output ( ) fileDropped = new EventEmitter < any > ( ) ; @ HostBinding ( 'style.opacity' ) private opacity = '1' ; @ HostListener ( 'dragover' , [ '$event' ] ) onDragOver ( evt ) { evt . preventDefault ( ) ; evt . stopPropagation ( ) ; } @ HostListener ( 'dragleave' , [ '$event' ] ) public onDragLeave ( evt ) { evt . preventDefault ( ) ; evt . stopPropagation ( ) ; } @ HostListener ( 'drop' , [ '$event' ] ) public ondrop ( evt ) { evt . preventDefault ( ) ; evt . stopPropagation ( ) ; const files = evt . dataTransfer . files ; if ( files . length > 0 ) { this . fileDropped . emit ( files ) ; } } }