import { Directive , EventEmitter , HostListener , Input , Output , } from '@angular/core' ; @ Directive ( { selector : '[inputFileDropZone]' } ) export class DropZoneDirective { @ Input ( ) public disabled = false ; @ Output ( ) public itemDragOver = new EventEmitter < any > ( ) ; @ Output ( ) public itemDragLeave = new EventEmitter < any > ( ) ; @ Output ( ) public itemDrop = new EventEmitter < any > ( ) ; private isOver : boolean ; private whiteListClasses = [ 'file-button' , 'mat-button-wrapper' , 'input-icon' ] ; param event @ HostListener ( 'dragover' , [ '$event' ] ) public onDragOver ( event ) { this . preventAndStopEventPropagation ( event ) ; if ( ! this . isOver && ! this . disabled ) { this . isOver = true ; this . itemDragOver . emit ( ) ; } } param event @ HostListener ( 'dragleave' , [ '$event' ] ) public onDragLeave ( event ) { this . preventAndStopEventPropagation ( event ) ; if ( this . isOver && this . isTrueLeave ( event ) && ! this . disabled ) { this . isOver = false ; this . itemDragLeave . emit ( ) ; } } param event @ HostListener ( 'drop' , [ '$event' ] ) public onDrop ( event ) { if ( ! this . disabled ) { this . preventAndStopEventPropagation ( event ) ; this . isOver = false ; try { this . itemDrop . emit ( event . dataTransfer . files ) ; } catch ( e ) { console . error ( e ) ; } } } param event private preventAndStopEventPropagation ( event ) { event . preventDefault ( ) ; event . stopPropagation ( ) ; } param event private isTrueLeave ( event ) { for ( const c of this . whiteListClasses ) { if ( event . fromElement != null && event . fromElement . className . indexOf ( c ) >= 0 ) { return false ; } } return true ; } }