Aws Vb Multipart Upload With Progress Bar
Today, through this post. We are going to learn how to upload a file and create a progress bar in an Angular 13 app using HttpClient, HttpEvent, and HttpEventType APIs.
A progress bar is a graphical UI representation to visualize the progress of programmatic functioning such as uploading, downloading, transfer, and installation of a data.
We will be setting up a basic Angular app with Limited API and make the Http POST asking to send the user name and epitome to the server.
The Principal purpose of this tutorial is to learn how to listen to the progress of the HTTP requests, specially when the data is being uploaded to the webserver.
Angular 13 File Upload with Progress Bar Example
- Create Angular app
- Setting up Node Server
- Ready Angular App
- Create Angular Service for Angular Progress Bar Demo
- Build Angular File Upload Arrangement with Progress Bar
Create Angular app
Install an Angular app from scratch to show you the file upload and progress bar demo:
ng new fileupload-progressbar-angular Get inside the projection folder:
cd fileupload-progressbar-angular In order to remove strict type warnings or error make sure to set "strict": false nether compilerOptions holding in tsconfig.json file.
Install and set up the Bootstrap 5 UI framework.
npm install bootstrap Inject the bootstrap style-sheet in the styles array in angular.json file.
"styles" : [ "node_modules/bootstrap/dist/css/bootstrap.min.css" , "src/styles.scss" ] Run the command to kickoff your Athwart File upload with progress bar app.
ng serve --open Setting upwards Node Server
We have created and included the node backend server in our GitHub repo.
You tin can git clone the complete the complete project and get into the project. Make sure to use the mongodb and nodemon for local server.
git clone https://github.com/SinghDigamber/fileupload-progressbar-angular.git Next, go into the backend folder and install the required dependency.
$ cd backend $ npm install Once the required packages installed then run the following command to start the mongoDB database.
mongod Then, outset the nodemon server by using the following command.
nodemon Once your server is up and running, so you lot tin can check your Node server app on the following Urls: http://localhost:4000
-
/api: for showing users listing -
/api/create-user: for creating user
Create Angular Service for Athwart Progress Bar Demo
Earlier creating file upload service, we need to import the HttpClientModule service in app.module.ts file.
import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [...], imports: [ HttpClientModule ], bootstrap: [...] }) export class AppModule { } In this stride, nosotros will create file upload service with HttpClient run the following control to create the service.
ng generate service file-upload Next, open the src/app/file-upload.service.ts file and add the following code
inside of information technology.
import { Injectable } from '@angular/core' ; import { Appreciable, throwError } from 'rxjs' ; import { catchError } from 'rxjs/operators' ; import { HttpErrorResponse, HttpClient } from '@angular/mutual/http' ; @ Injectable ( { providedIn: 'root' , } ) export form FileUploadService { constructor ( private http: HttpClient) { } addUser (name: string , profileImage: File) : Observable< whatsoever > { var formData: whatever = new FormData ( ) ; formData. append ( 'name' , name) ; formData. append ( 'avatar' , profileImage) ; return this .http . mail service ( 'http://localhost:4000/api/create-user' , formData, { reportProgress: truthful , notice: 'events' , } ) . pipe ( catchError ( this .errorMgmt) ) ; } errorMgmt (mistake: HttpErrorResponse) { permit errorMessage = '' ; if (error.error instanceof ErrorEvent ) { // Get client-side error errorMessage = error.error.bulletin; } else { // Get server-side error errorMessage = ` Error Code: ${error.status} \nMessage: ${error.message} ` ; } panel . log (errorMessage) ; render throwError ( ( ) => { return errorMessage; } ) ; } } Build Angular File Upload System with Progress Bar
Create a class which will permit to upload data to the server. Import the ReactiveFormsModule API in the app.module.ts file.
import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [...], imports: [ ReactiveFormsModule ], bootstrap: [...] }) export class AppModule { } Build a file upload form with Bootstrap 4 form components and Reactive Forms APIs.
Go to app/app.component.html file and add the following lawmaking:
<div class = "container" > <form [formGroup] = "form" (ngSubmit) = "submitUser()" > <!-- Progress Bar --> <div form = "progress course-group" *ngIf = "progress > 0" > <div class = "progress-bar progress-bar-striped bg-success" role = "progressbar" [way.width.%] = "progress" > </div > </div > <div grade = "form-group" > <input blazon = "file" (change) = "uploadFile($issue)" > </div > <div course = "class-group input-group-lg" > <input class = "form-control" placeholder = "Name" formControlName = "name" > </div > <div class = "course-group" > <push button form = "btn btn-danger btn-block btn-lg" > Create </button > </div > </course > </div > Side by side, go to app.component.ts file and add the following code within of information technology.
import { Component } from '@athwart/core' ; import { FormBuilder, FormGroup } from "@angular/forms" ; import { FileUploadService } from "./file-upload.service" ; import { HttpEvent, HttpEventType } from '@angular/mutual/http' ; @Component ( { selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.scss' ] } ) export class AppComponent { form: FormGroup; progress: number = 0 ; constructor ( public fb: FormBuilder, public fileUploadService: FileUploadService ) { this .form = this .fb. group ( { name: [ '' ] , avatar: [ null ] } ) } ngOnInit ( ) { } uploadFile ( outcome ) { const file = (event.target as HTMLInputElement) .files[ 0 ] ; this .form. patchValue ( { avatar: file } ) ; this .course. become ( 'avatar' ) . updateValueAndValidity ( ) } submitUser ( ) { this .fileUploadService. addUser ( this .form.value.proper noun, this .form.value.avatar ) . subscribe ( ( event: HttpEvent< whatsoever > ) => { switch (result. blazon ) { instance HttpEventType.Sent: console . log ( 'Request has been made!' ) ; break ; instance HttpEventType.ResponseHeader: console . log ( 'Response header has been received!' ) ; pause ; case HttpEventType.UploadProgress: this .progress = Math. round (issue.loaded / outcome.total * 100 ) ; console . log ( ` Uploaded! ${ this .progress} % ` ) ; intermission ; instance HttpEventType.Response: console . log ( 'User successfully created!' , event.body) ; setTimeout ( ( ) => { this .progress = 0 ; } , 1500 ) ; } } ) } } 
Conclusion
Finally, Angular file upload with progress bar tutorial is completed. I hope you enjoyed this tutorial.
Recommended Posts:
Source: https://www.positronx.io/angular-file-upload-with-progress-bar-tutorial/
0 Response to "Aws Vb Multipart Upload With Progress Bar"
Post a Comment