import { Component , ViewChild } from '@angular/core' ; import { MatSnackBar } from '@angular/material/snack-bar' ; import { Crumb } from '@ngx-starter-kit/breadcrumbs' ; import { FileUploadService } from './file-upload.service' ; @ Component ( { selector : 'ngx-file-upload' , templateUrl : './file-upload.component.html' , styleUrls : [ './file-upload.component.scss' ] , providers : [ FileUploadService ] , } ) export class FileUploadComponent { crumbs : ReadonlyArray < Crumb > = [ { name : 'Dashboard' , link : '/dashboard' } , { name : 'Experiments' , link : '/dashboard/experiments' } , { name : 'File Upload' } , ] ; @ ViewChild ( 'myPond' , { static : true } ) myPond : any ; myFiles = [ ] ; uploadToServer = { process : ( fieldName , file , metadata , load , error , progress , abort ) => { const formData = new FormData ( ) ; formData . append ( fieldName , file , file . name ) ; formData . append ( fieldName , JSON . stringify ( metadata ) ) ; this . uploadService . uploadFile ( file , { } , 'tenant1' ) . subscribe ( ( data ) => { this . myPond . removeFiles ( ) ; this . snackBar . open ( `Uploaded Successfully` , '' , { duration : 3000 , } ) ; } , ( err ) => { console . error ( `File Upload Error: ${ err . message }` ) ; this . snackBar . open ( `File Upload Error: ${ err . message }` , '' , { duration : 3000 , } ) ; } ) ; progress ( true , 0.25 , 1 ) ; const timer = setTimeout ( ( ) => { load ( 'unique-file-id' ) ; } , 1000 ) ; return { abort : ( ) => { clearTimeout ( timer ) ; abort ( ) ; } , } ; } , revert : ( uniqueFileId , load , error ) => { load ( ) ; } , load : ( uniqueFileId , load , error , progress , abort , headers ) => { error ( 'oh my goodness' ) ; progress ( true , 0 , 1024 ) ; return { abort : ( ) => { abort ( ) ; } , } ; } , fetch : ( url , load , error , progress , abort , headers ) => { } , restore : ( uniqueFileId , load , error , progress , abort , headers ) => { } , } ; pondOptions = { name : 'filepond' , multiple : true , maxFiles : 3 , maxFileSize : '1MB' , instantUpload : false , server : this . uploadToServer , acceptedFileTypes : 'image/*, application/pdf, application/*, text/plain, text/csv, .vsd' , } ; constructor ( public snackBar , private uploadService ) { } pondHandleInit ( ) { console . log ( 'FilePond has initialised' , this . myPond ) ; } pondHandleAddFile ( event ) { console . log ( 'A file was added' , event ) ; } }