Site icon RemoteStack

Angular 13 FilePond Adapter Multiple Files Upload Tutorial

remotestack

Angular 13 FilePond Image Upload and Preview Tutorial. As a UI or Front End developer, you know the importance of creating visually personable yet eloquent UI components.

This tutorial will show you how to create a File / Image uploading component in the Angular application using the FilePond package.

FilePond is one of the best JavaScript-based plugins for creating drag and drop file uploading functionality and comes with tons of features.

We love its design, and we are sure you will fall in love with its features too. It will elevate your experience for previewing images and validation exclusively for drag and drop image uploading.

FilePond is 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.

The primary package is built using vanilla JavaScript. Hence it can be used for tons of JavaScript frameworks. For example, React, Vue, Svelte, Angular and jQuery.

We have listed some of the powerful features of the FilePond plugin.

Create Image Upload Component in Angular with FilePond API

Install Angular CLI

Angular development solely relies on its supreme Angular CLI tool; you can easily create a project, add dependencies, and other services with this profound tool.

Here is the command that you may use to install the package.

npm install -g @angular/cli

Install New Angular App

Once the CLI is installed, again type the given command to download the new angular app.

ng new ng-demo

Move inside the app directory.

cd ng-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Install FilePond Libraries

In this step, you will be installing the FilePond package; also, we will install the other FilePond libraries, which are significantly essential for making the image upload component.

npm i filepond
npm i ngx-filepond
npm i filepond-plugin-image-edit
npm i filepond-plugin-image-preview
npm i filepond-plugin-file-validate-type

Add FilePond CSS

FilePond is known for its robust UI and aesthetics; however, you have to enable it by adding the file pond CSS into the angular.json file.

...
...
    "styles": [
        "src/styles.scss",
        "./node_modules/filepond/dist/filepond.min.css",
        "./node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
    ],
...
...

Register FilePond in App Module

Ideally, the FilePond package has to be added into the AppModule class, additionally, import the registerPlugin and use its method to pass FilePondPluginFileValidateType, FilepondPluginImageEdit and FilepondPluginImagePreview into it.

Add code in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';


// register fileponad modules
import { FilePondModule, registerPlugin } from 'ngx-filepond';
import  * as FilepondPluginImageEdit from 'filepond-plugin-image-edit';
import  * as FilepondPluginImagePreview from 'filepond-plugin-image-preview';
import  * as FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
registerPlugin(FilePondPluginFileValidateType, FilepondPluginImageEdit, FilepondPluginImagePreview);


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

export class AppModule { }

Update TypeScript Tempalte

To create the file upload and preview component, use the FilePond, and FilePondOptions packages to set the file pond options.

When you click on the store, you will see the preview and information of the file on the browser and its console.

Add code in app.component.ts file.

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

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

export class AppComponent {

  @ViewChild('imagePond')
  imagePond!: FilePond;

  pondOptions: FilePondOptions = {
    allowMultiple: true,
    labelIdle: 'Drop Images Here...',
    acceptedFileTypes: ['image/png', 'image/jpeg'],
    maxFiles:6,
    allowReorder:true
  }

  pondFiles: FilePondOptions["files"] = [
    {
            // the server file reference
            source: 'src/assets/demo.png',

            // set type to local to indicate an already uploaded file
            options: {
                type: 'local',

                // mock file information
                file: {
                    name: 'Demo',
                    size: 3001025,
                    type: 'image/png',
                },
            },
    }
  ]

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

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

  pondHandleRemoveFile(event: any) {
    console.log('A file was removed', event);
  }

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

  onFileUpload(){
    console.log(this.imagePond.getFiles());
  }

}

Add FilePond in HTML Component

FilePond service is incorporated in angular by using the file-pond directive; you may further use the plugin’s properties.

Add code in app.component.html file.

<file-pond #imagePond 
    [files]="pondFiles"
    [options]="pondOptions" 
    (onInit)="pondHandleInit()"
    (onAddfile)="pondHandleAddFile($event)"
    (onActivatefile)="pondHandleActivateFile($event)"
    (onRemovefile)="pondHandleRemoveFile($event)">
</file-pond>

<button (click)="onFileUpload()">Store</button>

Test Application

You have gone through every step, and now eventually, you have to start the angular development server.

Type the ng serve command and the –open tag; it will automatically open the app once the angular server is started.

ng serve --open

The following URL will appear on the browser’s address bar, and that is how the Angular FilePond image uploader component will look like.

http://localhost:4200

Summary

This comprehensive guide has taught you how to use FilePond and related dependencies to create file uploader components in the Angular application.

We also added the store button, which shows you the uploaded files selected from the file pond component device storage.

Moreover, in this Angular image preview example, we also used the file pond plugin to upload and show image preview with the drag n’ drop feature.

Exit mobile version