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:
HTML
< h1 > < span > < img src = "https://media.w3wiki.net/wp-content/assets/Group 210.svg" class = "gfg-logo" alt = "icon" /> </ span > < span style = "color: green; font-size: 40px;" > w3wiki </ span > </ h1 > < h3 >PrimeNG FileUpload Styling</ h3 > < p-fileUpload name = "myfile[]" ></ p-fileUpload > |
- app.component.ts:
Javascript
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:
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 {} |
- style.css:
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:
HTML
< h1 > < span > < img src = "https://media.w3wiki.net/wp-content/assets/Group 210.svg" class = "gfg-logo" alt = "icon" /> </ span > < span style = "color: green; font-size: 40px;" > w3wiki </ span > </ h1 > < h3 >PrimeNG FileUpload Styling</ h3 > < p-fileUpload name = "Beginner[]" 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:
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); } } } |
- 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({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, FileUploadModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
- app.component.css:
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:
Contact Us