This adapter has been deprecated, please use ngx-filepond instead.

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 angular-filepond --save

Add FilePond to an NgModule and if needed register any plugins. Please note that plugins need to be installed from npm separately.

import { FilePond, registerPlugin } from 'angular-filepond';

// Registering plugins
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm';

// Adding FilePond to imports
  imports: [

export class AppModule { }

Add the FilePond stylesheet to your angular-cli.json build script.

"styles": [

Now FilePond can be used in your templates.

import { Component, ViewChild } from '@angular/core';

  selector: 'app-root',
  template: `
    <div class="root">
        <FilePond #myPond 
            labelIdle="Drop files here..."
            acceptedFileTypes="image/jpeg, image/png"

export class AppComponent {

  myFiles = ['index.html'];

  // Allows us to get a reference to the FilePond instance
  @ViewChild('myPond') myPond: any;

  handleFilePondInit = () => {

    console.log('FilePond has initialised');

    // FilePond instance methods are available on `this.myPond`


Read the docs for more information

Angular Filepond

🔌 A handy FilePond adapter component for Angular

Angular Filepond Info

⭐ Stars 59
🔗 Homepage
🔗 Source Code
🕒 Last Update a year ago
🕒 Created 4 years ago
🐞 Open Issues 1
➗ Star-Issue Ratio 59
😎 Author pqina