import { ElementRef , EventEmitter , HostListener , Input , Output , Renderer2 } from '@angular/core' ; import { Directive , OnInit } from '@angular/core' ; import { takeWhile } from 'rxjs/operators' ; import { UploadState , UploadxControlEvent } from './interfaces' ; import { UploadxOptions } from './options' ; import { UploadxService } from './uploadx.service' ; @ Directive ( { selector : '[uploadx]' } ) export class UploadxDirective implements OnInit { @ Input ( ) set uploadx ( value ) { if ( value ) { this . options = value ; } } @ Input ( ) options : UploadxOptions = { } ; @ Input ( ) set control ( value ) { if ( value ) { this . uploadService . control ( value ) ; } } @ Output ( ) state = new EventEmitter < UploadState > ( ) ; constructor ( private elementRef , private renderer , private uploadService ) { } ngOnInit ( ) { const { multiple , allowedTypes } = { ... this . uploadService . options , ... this . options } ; multiple !== false && this . renderer . setAttribute ( this . elementRef . nativeElement , 'multiple' , '' ) ; allowedTypes && this . renderer . setAttribute ( this . elementRef . nativeElement , 'accept' , allowedTypes ) ; this . uploadService . events . pipe ( takeWhile ( ( ) => this . state . observers . length > 0 ) ) . subscribe ( this . state ) ; } @ HostListener ( 'change' , [ '$event.target.files' ] ) fileListener ( files ) { if ( files && files . item ( 0 ) ) { this . uploadService . handleFiles ( files , this . options ) ; } } }