File Upload

Question

I have upload files through Handler its working but how can i add progress bar to that from handler to Angyular UI

Jithu Thomas · Answer

Backend (Handler) using Node JS const express = require('express'); const multer = require('multer'); const app = express(); const PORT = 3000; const storage = multer.diskStorage({ destination: function (req file cb) { cb(null 'uploads/') } filename: function (req file cb) { cb(null file.originalname) } }); const upload = multer({ storage: storage }); app.post('/upload' upload.single('file') (req res) => { res.status(200).send('File uploaded successfully'); }); app.listen(PORT () => { console.log(`Server is running on port ${PORT}`); }); Angular Setup Install Angular HttpClient Module: Make sure HttpClientModule is imported in your AppModule: import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [AppComponent] imports: [BrowserModule HttpClientModule] providers: [] bootstrap: [AppComponent] }) export class AppModule {} Create a Service for File Upload: - import { Injectable } from '@angular/core'; import { HttpClient HttpEvent HttpEventType HttpHeaders HttpRequest } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class FileUploadService { private uploadUrl = 'http://localhost:3000/upload'; constructor(private http: HttpClient) {} uploadFile(file: File): Observable { const formData: FormData = new FormData(); formData.append('file' file file.name); const req = new HttpRequest('POST' this.uploadUrl formData { reportProgress: true }); return this.http.request(req).pipe( map(event => this.getEventMessage(event)) ); } private getEventMessage(event: HttpEvent ): number { switch (event.type) { case HttpEventType.UploadProgress: return Math.round((100 * event.loaded) / event.total); case HttpEventType.Response: return 100; default: return 0; } } } Component to Handle File Upload and Display Progress: import { Component } from '@angular/core'; import { FileUploadService } from './file-upload.service'; @Component({ selector: 'app-file-upload' template: ` = 0> Progress: {{ progress }}% ` }) export class FileUploadComponent { progress = 0; constructor(private fileUploadService: FileUploadService) {} onFileSelected(event: Event): void { const input = event.target as HTMLInputElement; if (input.files.length) { const file = input.files[0]; this.fileUploadService.uploadFile(file).subscribe(progress => { this.progress = progress; }); } } } By these steps you'll have a working file upload feature with a progress bar in your Angular application.