Angular PrimeNG FileUpload Properties

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

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

Angular PrimeNG FileUpload 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 posted.
• 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 the 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 the 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 a boolean data type, and the default value is true.
• showCancelButton: It is used to define the visibility of the cancel button. It is of a boolean data type, and 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 that represents the header configuration options. It is of HttpHeader data type, the default value is null.

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 --open

Example 1: This is the basic example that illustrates how to use the Angular PrimeNG FileUpload Properties.

• app.component.html:

HTML

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

• app.component.ts:

Javascript

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

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

export class AppComponent {}

• 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 example that illustrates how to use the Angular PrimeNG FileUpload Properties using multiple properties.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG FileUpload Properties</h5>

<p-fileUpload
    name="myfile[]"
    multiple="multiple"
    accept="text/*">
</p-fileUpload>

• app.component.ts:

Javascript

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

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

export class AppComponent {}

• 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