A handy FilePond adapter component for Angular

Usage no npm install needed!

<script type="module">
  import ngxFilepond from '';


Angular FilePond

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.

License: MIT npm version Donate with PayPal


Install FilePond component from npm.

npm install filepond ngx-filepond --save

Import 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';

  declarations: [
  imports: [
    FilePondModule // add filepond module here
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }
<!-- app.component.html -->
<file-pond #myPond 
// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { FilePondComponent } from 'ngx-filepond';
import { FilePondOptions } from 'filepond';

  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...'   

  pondFiles: FilePondOptions["files"] = [
      source: 'assets/photo.jpeg',
      options: {
        type: 'local'

  pondHandleInit() {
    console.log('FilePond has initialised', this.myPond);

  pondHandleAddFile(event: any) {
    console.log('A file was added', event);

  pondHandleActivateFile(event: any) {
    console.log('A file was activated', event)


Read the docs for more information