Angular FilePond is a handy adapter component for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
Install FilePond component from npm.
npm install ngx-filepond filepond --saveImport FilePondModule and if needed register any plugins. Please note that plugins need to be installed from npm separately.
Add FilePond styles path ./node_modules/filepond/dist/filepond.min.css to the build.options.styles property in angular.json
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// import filepond module
import { FilePondModule, registerPlugin } from 'ngx-filepond';
// import and register filepond file type validation plugin
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
registerPlugin(FilePondPluginFileValidateType);
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FilePondModule // add filepond module here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }<!-- app.component.html -->
<file-pond #myPond
[options]="pondOptions"
[files]="pondFiles"
(oninit)="pondHandleInit()"
(onaddfile)="pondHandleAddFile($event)">
</file-pond>// app.component.ts
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('myPond') myPond: any;
pondOptions = {
class: 'my-filepond',
multiple: true,
labelIdle: 'Drop files here',
acceptedFileTypes: 'image/jpeg, image/png'
}
pondFiles = [
'index.html'
]
pondHandleInit() {
console.log('FilePond has initialised', this.myPond);
}
pondHandleAddFile(event: any) {
console.log('A file was added', event);
}
}