Angular PrimeNG FileUpload Events

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn about Angular PrimeNG FileUpload Events

The FileUpload component is used to make an element that provides users to upload file content.

Angular PrimeNG provides different events, like onBeforeUpload, onSend, onUpload, or onError, etc, that help to create the dynamic FileUpload.

Angular PrimeNG FileUpload Events:

• onBeforeUpload: It is a callback that is fired before file upload is initialized.
• onSend: It is a callback that is fired when the request was sent to the server.
• onUpload: It is a callback that is fired when file upload is complete.
• onError: It is a callback that is fired if file upload fails.
• onClear: It is a callback that is fired when files in the queue are removed without uploading using the clear all button.
• onRemove: It is a callback that is fired when a file is removed without uploading using a clear button of a file.
• onSelect: It is a callback that is fired when files are selected.
• onProgress: It is a callback that is fired when files are being uploaded.
• uploadHandler: It is a callback that is fired in custom upload mode to upload the files manually.

Syntax:

<p-fileUpload name="..."
    (event)=function()>
    .....
</p-fileUpload>

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: It will look like the following

Steps to run the application: Run the below command to see the output

ng serve --save

Example 1: Below is the example code that illustrates the use of Angular PrimeNG FileUpload Events. In this example, we will learn about onBeforeUpload Event.

• app.component.html:

HTML

<div style="width: 80%;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>Angular PrimeNG FileUpload Events</h2>
    <p-fileUpload
        name="myfile[]"
        (onBeforeUpload)="onBeforeUpload()">
      </p-fileUpload>
</div>

• app.component.ts:

Javascript

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})

export class AppComponent {
    onBeforeUpload() {
        alert("Hi Geek!! On Before Called!!!");
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { FileUploadModule } from "primeng/fileupload";
import { HttpClientModule } from "@angular/common/http";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FileUploadModule,
        HttpClientModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

Output:

Example 2: Below is another code that illustrates the use of Angular PrimeNG FileUpload Events. In this example, we will learn about onRemove Event.

• app.component.html:

HTML

<div style="width: 80%;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>Angular PrimeNG FileUpload Events</h2>
    <p-fileUpload name="myfile[]"
        (onRemove)="onRemove()">
      </p-fileUpload>
</div>

• app.component.ts:

Javascript

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})

export class AppComponent {
    onRemove() {
        alert("Hi Geek!! File is removed!!!");
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { FileUploadModule } from "primeng/fileupload";
import { HttpClientModule } from "@angular/common/http";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FileUploadModule,
        HttpClientModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

Output:

Reference: https://primefaces.org/primeng/fileupload