pqina/ngx-filepond

npm install filepond ngx-filepond --save

// 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)"
  (onactivatefile)="pondHandleActivateFile($event)"
>
</file-pond>

// app.component.ts
import { Component, ViewChild } from "@angular/core";
import { FilePondComponent } from "ngx-filepond";
import { FilePondOptions } from "filepond";

@Component({
  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);
  }
}

import * as FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}