Upload files in Angular e FilePond

FilePond è una libreria per Javascript per l'upload dei files.

Non esegue un vero upload sul server, nel senso che deve esserci una API che viene richiamata lato server, ma si occupa della parte lato client.

In questo articolo vediamo come usarla in Angular.

Dobbiamo installare un pò di librerie; possiamo usare npm:

npm i filepond ngx-filepond filepond-plugin-file-validate-type --save --force

Io ho dovuto usare --force; non so se è dovuto alla versione di Node.js/npm che ho sul pc.

Su un altro pc invece non c'è stato verso di farlo partire.

Purtroppo Angular sta soffrendo un pò di problemi con tutte gli aggiornamenti che sta facendo.....

Comunque, fatto questo dobbiamo fare una modifica al file app.module.ts:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {FilePondModule, registerPlugin} from 'ngx-filepond';
import * as FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';

registerPlugin(FilePondPluginFileValidateType);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FilePondModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}

Questo il nostro componente:

import {Component, OnInit, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {FilePondComponent} from 'ngx-filepond';
import {FilePondOptions} from 'filepond';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Test Angular';

  @ViewChild("my_pond") myPond: FilePondComponent;

  pondOptions: FilePondOptions = {
    allowMultiple: true,
    labelIdle: "Drop files",
  };

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

  pondHandleInit() {
    console.log("INIZIALIZZATO", this.myPond);
  }

  pondHandleAddFile(event: any) {
    console.log("È STATO AGGIUNTO UN FILE", event);
  }

  pondHandleActivateFile(event: any) {
    console.log("UN FILE È STATO ATTIVATO", event);
  }

}

E questo l'HTML:

<file-pond
  #my_pond
  [options]="pondOptions"
  [files]="pondFiles"
  (oninit)="pondHandleInit()"
  (onaddfile)="pondHandleAddFile($event)"
  (onactivatefile)="pondHandleActivateFile($event)">
</file-pond>

Enjoy!