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 =
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 =
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 : #0fb800 e 8 !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: