Step 1: Install Angular CLI and create a new project
You can install the angular CLI using this command.
npm install -g @angular/cli
You can create a new angular project using the following command.
ng new FileUploadDemo
You can use this command to run the project.
ng serve --open
Step 2: Add the HttpClientModule
You can import this module in the app.module.ts file.
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { HttpClientModule } from '@angular/common/http';@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [], bootstrap: [ AppComponent ]})export class AppModule { }
Step 3: Create angular components
You can create components using the following command.
After running this command, angular CLI generates four files of this component and added in the declaration array in the app.module.ts file.
Step 4: Adding angular routing
After creating a component, you can add the routing in the app-routing.module.ts file. First, you need to import this component and then add the routes.
import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { AboutComponent } from './about/about.component';import { HomeComponent } from './home/home.component';const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, ];@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})export class AppRoutingModule { }
Step 5: Setting up angular material
You can use the following command to add angular material.
In the app.module.ts file, you can add the module.
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { HttpClientModule } from '@angular/common/http';import { HomeComponent } from './home/home.component';import { AboutComponent } from './about/about.component';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { MatToolbarModule } from '@angular/material/toolbar';import { MatIconModule } from '@angular/material/icon';import { MatCardModule } from '@angular/material/card';import { MatButtonModule } from '@angular/material/button';import { MatProgressBarModule } from '@angular/material/progress-bar';@NgModule({ declarations: [ AppComponent, HomeComponent, AboutComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, MatToolbarModule, MatCardModule, MatButtonModule, MatProgressBarModule, MatIconModule ], providers: [], bootstrap: [ AppComponent ]})export class AppModule { }
Step 6: Create file upload service
You can use the following command to generate a service.
In the UploadService.ts file, write the following code.
import { Injectable } from '@angular/core';import { HttpClient, HttpEvent, HttpErrorResponse, HttpEventType } from '@angular/common/http'; import { map } from 'rxjs/operators';@Injectable({ providedIn: 'root'})export class UploadService { SERVER_URL: string = "https://file.io/"; constructor( private httpClient: HttpClient ) { } public upload(formData) { return this.httpClient.post(this.SERVER_URL, formData, { reportProgress: true, observe: 'events' }); }}
Want to Hire Trusted AngularJS Development Company -Enquire Today.
Step 7:After creating the service, you need to define the upload method in the home.component.ts file
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';import { HttpEventType, HttpErrorResponse } from '@angular/common/http';import { of } from 'rxjs'; import { catchError, map } from 'rxjs/operators'; import { UploadService } from '../upload.service';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss']})export class HomeComponent implements OnInit { @ViewChild("fileUpload", {static: false}) fileUpload: ElementRef;files = []; constructor( private uploadService: UploadService ) { } ngOnInit(): void { } uploadFile(file) { const formData = new FormData(); formData.append('file', file.data); file.inProgress = true; this.uploadService.upload(formData).pipe( map(event => { switch (event.type) { case HttpEventType.UploadProgress: file.progress = Math.round(event.loaded * 100 / event.total); break; case HttpEventType.Response: return event; } }), catchError((error: HttpErrorResponse) => { file.inProgress = false; return of(`${file.data.name} upload failed.`); })).subscribe((event: any) => { if (typeof (event) === 'object') { console.log(event.body); } }); } private uploadFiles() { this.fileUpload.nativeElement.value = ''; this.files.forEach(file => { this.uploadFile(file); }); } onClick() { const fileUpload = this.fileUpload.nativeElement;fileUpload.onchange = () => { for ( let index = 0; index < fileUpload.files.length; index++) { const file = fileUpload.files[index]; this.files.push({ data: file, inProgress: false, progress: 0}); } this.uploadFiles(); }; fileUpload.click(); }}
Next, you need to create an HTML template. Add the following content in the home.component.html file.
Next, add the toolbar in the app.component.html file.
ngImageUpload