Angular PrimeNG FileUpload Styling
Last Updated :
13 Mar, 2024
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.
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 >
|
Javascript
import { Component } from "@angular/core" ;
@Component({
selector: "app-root" ,
templateUrl: "./app.component.html" ,
styleUrls: [ "./app.component.css" ]
})
export class AppComponent {
title = "fileUploadStyling" ;
}
|
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({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
FileUploadModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
|
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.
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 >
|
Javascript
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);
}
}
}
|
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({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
FileUploadModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
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:
Â
Share your thoughts in the comments
Please Login to comment...