import { Component , EventEmitter , ViewEncapsulation , ElementRef , SimpleChanges , NgZone } from '@angular/core' ; import { OptionTypes , create , supported , registerPlugin as register } from 'filepond' ; const isSupported = supported ( ) ; const filteredComponentMethods = [ 'setOptions' , 'on' , 'off' , 'onOnce' , 'appendTo' , 'insertAfter' , 'insertBefore' , 'isAttachedTo' , 'replaceElement' , 'restoreElement' , 'destroy' ] ; const inputs = [ ] ; const outputs = [ ] ; const update = ( ) => { inputs . length = 0 ; outputs . length = 0 ; for ( const prop in OptionTypes ) { if ( /^on/ . test ( prop ) ) { outputs . push ( prop ) ; continue ; } inputs . push ( prop ) ; } } ; update ( ) ; export const registerPlugin = ( ... args ) => { register ( ... args ) ; update ( ) ; } ; @ Component ( { selector : 'FilePond' , template : `
      <div class="filepond--wrapper">
        <input type="file" id={{id}} name={{name}} class={{className}} required={{required}} multiple={{allowMultiple}} accept={{acceptedFileTypes}}/>
      </div>
    ` , encapsulation : ViewEncapsulation . None , inputs , outputs } ) export class FilePond { private _pond : any ; private _root : any ; private _element : any ; private _options : any ; constructor ( _root , private _ngZone ) { this . _root = _root ; this . _options = { } ; outputs . forEach ( output => { this [ output ] = new EventEmitter ( ) ; } ) ; } ngAfterViewInit ( ) { this . _element = this . _root . nativeElement . querySelector ( 'input' ) ; const emitters = outputs . reduce ( ( obj , output ) => { obj [ output ] = ( ... args ) => { this [ output ] . emit ( output , ... args ) ; } ; return obj ; } , { } ) ; this . _ngZone . runOutsideAngular ( ( ) => { this . _pond = create ( this . _element , Object . assign ( this . _options , emitters ) ) ; } ) ; Object . keys ( this . _pond ) . filter ( key => ! filteredComponentMethods . includes ( key ) ) . forEach ( key => { this [ key ] = this . _pond [ key ] ; } ) ; } ngOnChanges ( changes ) { for ( const key in this ) { if ( ! inputs . includes ( key ) ) { continue ; } this . _options [ key ] = this [ key ] ; } if ( ! this . _pond ) { return ; } this . _pond . setOptions ( this . _options ) ; } ngOnDestroy ( ) { if ( ! this . _pond ) { return ; } this . _pond . destroy ( ) ; } }