import { Component , ViewChild } from '@angular/core' ; import { FilePondComponent } from './modules/filepond/filepond.component' ; import { FilePondOptions } from 'filepond' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent { @ ViewChild ( 'myPond' ) myPond : FilePondComponent ; pondOptions : FilePondOptions = { allowMultiple : true , labelIdle : 'Drop files here...' , server : { process : ( fieldName , file , metadata , load ) => { setTimeout ( ( ) => { load ( Date . now ( ) . toString ) ; } , 1500 ) ; } , load : ( source , load ) => { fetch ( source ) . then ( res => res . blob ( ) ) . then ( load ) ; } } } ; pondFiles : FilePondOptions [ "files" ] = [ { source : 'assets/photo.jpeg' , options : { type : 'local' } } ] ; pondHandleInit ( ) { console . log ( 'FilePond has initialised' , this . myPond ) ; } pondHandleAddFile ( event ) { console . log ( 'A file was added' , event ) ; } pondHandleActivateFile ( event ) { console . log ( 'A file was activated' , event ) ; } }