Angular PrimeNG FileUpload Component

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 know how to use the FileUpload component in Angular PrimeNG. We will also learn about the properties, events, methods & styling along with their syntaxes that will be used in the code. 

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

Properties:

• name: It is the name of the request parameter. It is of string data type, the default value is null.
• url: It is the url to upload the files. It is of string data type, the default value is null.
• method: It specifies the HTTP method which is used to send. It is of string data type, the default value is post.
• multiple: It is used to select multiple files at once. It is of boolean data type, the default value is false.
• accept: It is the pattern to restrict the allowed file types. It is of string data type, the default value is false.
• disabled: It is used to disable the upload functionality. It is of boolean data type, the default value is false.
• auto: It specifies whether the upload begins automatically after selection is completed. It is of boolean data type, the default value is false.
• maxFileSize: It is the maximum file size allowed in bytes. It is of number data type, the default value is null.
• fileLimit: It is the maximum number of files that can be uploaded. It is of number data type, the default value is null.
• invalidFileSizeMessageSummary: It is the summary message of the invalid file size. It is of string data type, the default value is {0}: Invalid file size.
• invalidFileSizeMessageDetail: It is the detailed message of the invalid file size. It is of string data type, the default value is “maximum upload size is {0}.”
• invalidFileTypeMessageSummary: It is the summary message of the invalid file type. It is of string data type, the default value is “{0}: Invalid file type, “.
• invalidFileLimitMessageDetail: It is the detailed message of the invalid file type. It is of string data type, the default value is “limit is {0} at most”.
• invalidFileLimitMessageSummary: It is the summary message of the invalid file type. It is of string data type, the default value is “Maximum number of files exceeded”.
• invalidFileTypeMessageDetail: It is the detailed message of the invalid file type. It is of string data type, the default value is “allowed file types: {0}”.
• style: It is used to specify the inline style of the component. It is of string data type, the default value is null.
• styleClass: It is used to specify the style class of the component. It is of string data type, the default value is null.
• previewWidth: It is the width of the image thumbnail in pixels. It is of number data type, the default value is 50.
• chooseLabel: It is the label of the choose button. It is of string data type, the default value is null.
• uploadLabel: It is the label of the upload button. It is of string data type, the default value is null.
• cancelLabel: It is the label of the cancel button. It is of string data type, the default value is null.
• chooseIcon: It is the icon of the choose button. It is of string data type, the default value is pi pi-plus.
• uploadIcon: It is the icon of the upload button. It is of string data type, the default value is pi pi-upload.
• cancelIcon: It is the icon of the cancel button. It is of string data type, the default value is pi pi-times.
• mode: It is used to define the UI of the component. It is of string data type, the default value is advanced.
• customUpload: It is used to define whether to use the default upload or a manual implementation-defined in uploadHandler callback. It is of boolean data type, the default value is false.
• showUploadButton: It is used to define the visibility of the upload button. It is of boolean data type, the default value is true.
• showCancelButton: It is used to define the visibility of the cancel button. It is of boolean data type, the default value is true.
• files: It is the list of files to be provided to the FileUpload externally. It is of array data type, the default value is null.
• headers: It is the HttpHeaders class represents the header configuration options. It is of HttpHeader data type, the default value is null.

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.

Methods:

• upload: It is used to uploads the selected files.
• clear: It is used to clears the files list.

Styling:

• p-fileupload: It is the container element.
• p-fileupload-buttonbar: It is the header containing the buttons.
• p-fileupload-content: It is the content section.

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:

Example 1: This is the basic example that illustrates how to use the FileUpload component.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>PrimeNG FileUpload Component</h5>
<p-fileUpload name="myfile[]"></p-fileUpload>

app.component.ts

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

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

app.module.ts

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: In this example, we will be making an upload element that accepts multiple files and images only by using the multiple property.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>PrimeNG FileUpload Component</h5>
<p-fileUpload
  name="myfile[]"
  multiple="multiple"
  accept="image/*">
</p-fileUpload>

app.component.ts

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

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

app.module.ts

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://primeng.org/fileupload