πŸ”Œ A handy FilePond adapter component for Angular
Switch branches/tags
Nothing to show
Clone or download
rikschennink Update README.md
add filepond to npm install
Latest commit 128ab04 Dec 3, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update ISSUE_TEMPLATE.md Jun 21, 2018
e2e initial commit May 24, 2018
src up version Nov 30, 2018
.editorconfig initial commit May 24, 2018
.gitignore initial commit May 24, 2018
LICENSE fix spelling error May 25, 2018
README.md Update README.md Dec 3, 2018
angular.json initial commit May 24, 2018
package-lock.json initial commit May 24, 2018
package.json up FilePond dependency version Aug 13, 2018
tsconfig.json initial commit May 24, 2018
tslint.json initial commit May 24, 2018

README.md

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

Installation

Install FilePond component from npm.

npm install ngx-filepond 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';
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);
  }
}

Read the docs for more information