Combine FilePond with Pintura and create the perfect image edit and upload experience.
The FilePond Angular Component functions as a tiny adapter for the FilePond object so it's easier to use with Angular.
Installation instructions for npm.
npm install filepond ngx-filepond --save
We add the stylesheet(s) to our angular.json
configuration.
"styles": [
"styles.css",
"../node_modules/filepond/dist/filepond.min.css"
]
After importing the component in an NgModule
we can use the <FilePond>
Component in our Angular project.
FilePond plugins are not automatically installed, we need to install them manually.
// 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 {}
The adapter automatically references FilePond methods to the Component instance.
We can configure our pond by using the FilePond instance properties as properties on the [options]
attribute.
The callback methods like oninit
and onaddfile
are not available as properties and have been mapped to events.
<!-- 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);
}
}
With FilePond set up, we can continue to configure FilePond to our liking by adjusting the available configuration options