Angular PrimeNG FileUpload Styling

A responsive website may be created with great ease using the open-source Angular PrimeNG framework, which has a wide range of native Angular UI components for superb style. In this article, we are going to discuss Angular PrimeNG FileUpload Styling. 

A powerful uploader, FileUpload supports drag-and-drop, multi-file uploads, automatic uploading, progress tracking, and validations. FileUpload needs a name to identify the files at the backend and a URL property to serve as the upload target.

Angular PrimeNG FileUpload Styling Classes:

• p-fileupload: This class is for applying custom styling to the Container element of the file upload section.
• p-fileupload-buttonbar: This class is for applying custom styling to the Header containing the buttons.
• p-fileupload-content: This class is for applying custom styling to the Content section.

Syntax:

<p-fileUpload 
    name="...">
</p-fileUpload>

Creating Angular application and Installing the modules:

Step 1: Use the command below to create an Angular application.

ng new appname

Step 2: Use the following command to move to our project folder, appname, after creating it.

cd appname

Step 3: Install PrimeNG in the specified location.

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

Project Structure: The project structure will look like this once the installation is finished:

Steps to run the application: Run the below command

ng serve --open

Example 1: Below is a simple example code that illustrates the use of Angular PrimeNG FileUpload Styling. This example shows how to change the upload button section using p-fileupload-buttonbar class.

• app.component.html:

<h1>
    <span>
          <img src=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
            class="gfg-logo" alt="icon" />
      </span>
       
      <span style="color: green; font-size: 40px;">
          GeeksforGeeks
      </span>
</h1>
<h3>PrimeNG FileUpload Styling</h3>
<p-fileUpload name="myfile[]"></p-fileUpload>

• app.component.ts:

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

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

export class AppComponent {
    title = "fileUploadStyling";
}

• 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({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FileUploadModule,
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {}

• style.css:

:host ::ng-deep .p-fileupload .p-fileupload-buttonbar {
    display: flex;
    justify-content: center;
}

Output:

Example 2: Below is a simple example code that illustrates the use of Angular PrimeNG FileUpload Styling. This example shows how to change the content section on file uploading using p-fileupload-content class.

• app.component.html:

<h1>
    <span>
        <img src=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
            class="gfg-logo" alt="icon" />
    </span>
     
    <span style="color: green; font-size: 40px;"> GeeksforGeeks </span>
</h1>
<h3>PrimeNG FileUpload Styling</h3>

<p-fileUpload
    name="Geeks[]"
    multiple="multiple"
    accept=".txt"
    maxFileSize="1000000">
    <ng-template pTemplate="content">
        <ul *ngIf="uploadedGFG.length">
            <li *ngFor="let gfg of uploadedFiles">
                {{ gfg.name }} {{ gfg.size }} bytes
            </li>
        </ul>
    </ng-template>
</p-fileUpload>

• app.component.ts:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

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

export class AppComponent {
    uploadedGFG: any[] = [];

    onUpload(event) {
        for (let file of event.files) {
        this.uploadedGFG.push(file);
        }
    }
}

• 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({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FileUploadModule,
        HttpClientModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

• app.component.css:

:host ::ng-deep .p-fileupload .p-fileupload-content {
    background: #0fb800e8 !important;
    font-size: 20px;
    font-weight: 600;
}
:host ::ng-deep .p-fileupload-content 
    .p-fileupload-row.ng-star-inserted img {
    width: 120px;
    height: 75px;
}

Output: