How to Create an Image Uploader With Angular

In this tutorial, I will show you way to build (Multiple) Image upload and Preview example with Web API/Rest API using Angular Material 12, FormData and Progress Bar.

More Practice:
– Angular 12 + Spring Kicking: File upload example
– Angular 12 + Node.js: File Upload example
– Athwart 12 Login and Registration case with JWT & Web Api
– Angular 12 Grime Application example with Spider web API
– Athwart 12 Form Validation case (Reactive Forms)
– Using Bootstrap: Angular 12 Multiple Images Upload with Preview example

Serverless with Firebase:
Athwart 12 Upload File to Firebase Storage instance

Overview

We will create an Angular Material 12 (Multiple) Paradigm upload with Preview application in that user tin:

• run across the preview of images that will exist uploaded
• see the upload process (percentage) of all uploading images
• view all uploaded images
• download image by clicking on the file name

Hither are screenshots of our React App:

– Before upload:

– When Upload is done:

– Listing of Images Display with download Urls:

– Bear witness status for each image upload:

Technology

• Angular 12
• RxJS 6
• Angular Material 12

Spider web API for Prototype Upload & Storage

Here are Residual APIs that we will use Axios to brand HTTP requests:

Methods	Urls	Actions
Mail	/upload	upload a File
GET	/files	get Listing of Files (name & url)
Get	/files/[filename]	download a File

You tin can find how to implement the Residual APIs Server at one of post-obit posts:
– Node.js Express File Upload Balance API example
– Node.js Limited File Upload to MongoDB case
– Node.js Express File Upload to Google Cloud Storage example
– Jump Boot Multipart File upload (to static binder) example

Setup Athwart Material 12 Image Upload Preview Project

Let's open up cmd and use Athwart CLI to create a new Angular Project as following control:

          ng new AngularMaterial12ImageUploadPreview ? Would you similar to add Angular routing? No ? Which stylesheet format would you lot like to utilize? CSS                  

We also need to generate some Components and Services:

          ng g s services/file-upload ng g c components/upload-images                  

Now you can run across that our projection directory structure looks like this.

Angular Material 12 App for Image upload with Preview

Let me explain it briefly.

– We import necessary library, components in app.module.ts.
– file-upload.service provides methods to relieve File and get Files from Rest Apis Server.
– upload-images.component contains upload multiple images grade, preview, some progress bars, display list of images.
– app.component is the container that we embed all components.
– index.html for importing the Font and Icons.

Install Angular Material

Set upwards your Angular Cloth projection past running the command:
ng add @angular/cloth

You demand to answer some questions:

          ℹ Using package director: npm ✔ Found compatible package version: @angular/[email protected] ✔ Packet information loaded. The package @angular/[e-mail protected] will exist installed and executed. Would you lot similar to continue? Yep ✔ Package successfully installed. ? Choose a prebuilt theme name, or "custom" for a custom theme:   Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]       > Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]    Pink/Blue Gray     [ Preview: https://material.angular.io?theme=pinkish-bluegrey ]       Purple/Green       [ Preview: https://material.athwart.io?theme=purple-green ]        Custom    ? Gear up global Athwart Material typography styles? Yes  ? Gear up up browser animations for Athwart Fabric? No                  

The command will install Angular Material, the Component Dev Kit (CDK), Athwart Animations and additionally perform the following configurations:

• Add projection dependencies to package.json
• Add together the Roboto font to index.html
• Add the Material Design icon font to alphabetize.html
• Add a few global CSS styles to styles.css

Prepare up App Module

Open up app.module.ts, import HttpClientModule and several Athwart Material modules:

          import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { NoopAnimationsModule } from '@athwart/platform-browser/animations'; import { UploadImagesComponent } from './components/upload-images/upload-images.component'; import { MatCardModule } from '@angular/material/card'; import { MatToolbarModule } from '@athwart/textile/toolbar'; import { MatButtonModule } from '@angular/cloth/button'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@athwart/material/course-field'; import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatListModule } from '@angular/cloth/list'; const materialModules = [   MatCardModule,   MatToolbarModule,   MatButtonModule,   MatInputModule,   MatFormFieldModule,   MatProgressBarModule,   MatListModule ]; @NgModule({   declarations: [     AppComponent,     UploadImagesComponent   ],   imports: [     BrowserModule,     HttpClientModule,     NoopAnimationsModule,     ...materialModules   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }                  

Create Angular Service for Upload Files

This service will use Athwart HttpClient to transport HTTP requests.
There are ii functions:

• upload(file): returns Observable<HttpEvent<whatsoever>> that we're gonna use for tracking progress
• getFiles(): returns a listing of Files' information as Observable object

services/file-upload.service.ts

          import { Injectable } from '@angular/core'; import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable({   providedIn: 'root' }) export class FileUploadService {   private baseUrl = 'http://localhost:8080';   constructor(private http: HttpClient) { }   upload(file: File): Observable<HttpEvent<whatever>> {     const formData: FormData = new FormData();     formData.append('file', file);     const req = new HttpRequest('POST', `${this.baseUrl}/upload`, formData, {       reportProgress: true,       responseType: 'json'     });     return this.http.request(req);   }   getFiles(): Observable<any> {     return this.http.get(`${this.baseUrl}/files`);   } }                  

– FormData is a data structure that can be used to shop key-value pairs. Nosotros use it to build an object which corresponds to an HTML form with suspend() method.

– We set reportProgress: truthful to exposes progress events. Discover that this progress outcome are expensive (modify detection for each effect), so you should only use when you want to monitor it.

– We call the request(PostRequest) & go() method of HttpClient to send an HTTP Postal service & Become asking to the Multiple Files Upload Balance server.

Create Angular Textile 12 Component for Upload Images

Allow's create a Multiple Images Upload UI with Preview, Progress Bars, Card, Button and Message.

Outset we need to utilise the following imports:

upload-images.component.ts

          import { Component, OnInit } from '@angular/core'; import { HttpEventType, HttpResponse } from '@angular/common/http'; import { Appreciable } from 'rxjs'; import { FileUploadService } from 'src/app/services/file-upload.service';                  

Then we ascertain the some variables and inject FileUploadService as follows:

          export class UploadImagesComponent implements OnInit {   selectedFiles?: FileList;   selectedFileNames: string[] = [];   progressInfos: whatever[] = [];   message: string[] = [];   previews: cord[] = [];   imageInfos?: Observable<whatsoever>;   constructor(private uploadService: FileUploadService) { } }                  

The progressInfos is an array that contains items for display upload progress of each images. Each particular will take ii fields: percent & fileName.

selectedFileNames array will be used for displaying selected files.

Side by side we ascertain selectFiles() method. It helps us to get the selected Images that we're gonna upload.

          selectFiles(issue: whatever): void {   this.bulletin = [];   this.progressInfos = [];   this.selectedFileNames = [];   this.selectedFiles = event.target.files;   this.previews = [];   if (this.selectedFiles && this.selectedFiles[0]) {     const numberOfFiles = this.selectedFiles.length;     for (let i = 0; i < numberOfFiles; i++) {       const reader = new FileReader();       reader.onload = (e: any) => {         panel.log(e.target.result);         this.previews.push button(eastward.target.result);       };       reader.readAsDataURL(this.selectedFiles[i]);       this.selectedFileNames.push(this.selectedFiles[i].proper noun);     }   } }                  

We use FileReader with readAsDataURL() method to get the image preview URL and put it into previews array. This method produces data as a information: URL representing the file'south data as a base64 encoded cord. The URL life is tied to the document in the window on which information technology was created.

As well utilize selectedFiles array for accessing current selected Files.

Now we iterate over the selected Files higher up and call upload() method on each file detail.

          uploadFiles(): void {   this.message = [];   if (this.selectedFiles) {     for (let i = 0; i < this.selectedFiles.length; i++) {       this.upload(i, this.selectedFiles[i]);     }   } }                  

Next we define upload() method for uploading each image:

          upload(idx: number, file: File): void {   this.progressInfos[idx] = { value: 0, fileName: file.proper name };   if (file) {     this.uploadService.upload(file).subscribe(       (event: whatever) => {         if (event.type === HttpEventType.UploadProgress) {           this.progressInfos[idx].value = Math.round(100 * event.loaded / upshot.total);         } else if (result instanceof HttpResponse) {           const msg = 'Uploaded the file successfully: ' + file.name;           this.message.push(msg);           this.imageInfos = this.uploadService.getFiles();         }       },       (err: any) => {         this.progressInfos[idx].value = 0;         const msg = 'Could not upload the file: ' + file.name;         this.message.push(msg);       });   } }                  

We employ idx for accessing index of the current File to work with progressInfos array. Then we call uploadService.upload() method on the file.

The progress will exist calculated basing on event.loaded and event.total.
If the transmission is washed, the upshot will exist a HttpResponse object. At this fourth dimension, we call uploadService.getFiles() to get the files' information and assign the upshot to imageInfos variable.

We likewise need to exercise this work in ngOnInit() method:

          ngOnInit(): void {   this.imageInfos = this.uploadService.getFiles(); }                  

Now nosotros create the HTML template of the Upload Images UI with Angular Textile Components.
Add the following content to upload-images.component.html file:

          <div *ngFor="let progressInfo of progressInfos">   <span>{{ progressInfo.fileName }}</span>   <mat-toolbar class="progress-bar">     <mat-progress-bar       color="accent"       [value]="progressInfo.value"     ></mat-progress-bar>     <span class="progress">{{ progressInfo.value }}%</span>   </mat-toolbar> </div> <mat-form-field>   <div>     <mat-toolbar>       <input matInput [value]="selectedFileNames.length ? selectedFileNames : 'Select Images'" />       <button         mat-flat-push button         color="master"         [disabled]="!selectedFiles"         (click)="uploadFiles()"       >         Upload       </button>     </mat-toolbar>     <input       type="file"       id="fileInput"       name="fileInput"       accept="prototype/*" multiple        (change)="selectFiles($event)"     />   </div> </mat-course-field> <div>   <img *ngFor='let preview of previews' [src]="preview" class="preview"> </div> <div *ngIf="message.length" class="bulletin">   <ul *ngFor="allow msg of message; let i = alphabetize">     <li>{{ msg }}</li>   </ul> </div> <mat-card grade="list-carte">   <mat-card-header>     <mat-card-championship>Listing of Images</mat-carte du jour-title>   </mat-menu-header>   <mat-bill of fare-content>     <mat-list role="listing">       <mat-list-detail role="listitem" *ngFor="let prototype of imageInfos | async" course="listing-item">         <p matLine><a href="{{ image.url }}">{{ image.name }}</a></p>         <img src="{{ image.url }}" alt="{{ prototype.name }}" superlative="50px"/>       </mat-listing-item>     </mat-list>   </mat-carte-content> </mat-bill of fare>                  

Don't forget to customize the style with CSS in upload-images.component.css:

          .progress-bar {   padding: 0; } .progress {   width: 50px; } .mat-input-element {   font-size: medium;   font-weight: 200; } #fileInput {   position: absolute;   cursor: pointer;   z-index: 10;   opacity: 0;   height: 100%;   left: 0px;   elevation: 0px; } .mat-toolbar-single-row {   height: motorcar !important;   background: transparent;   padding: 0; } .mat-toolbar-single-row button {   width: 100px; } .mat-form-field {   width: 100%; } .message {   background-color: #ddd;   padding: 15px;   colour: #333;   border: #aaa solid 1px;   border-radius: 4px;   margin: 15px 0; } .preview {   max-width: 200px;   vertical-align: middle; } .list-card {   margin-top: 20px; } .list-item {   margin-bottom: 20px; }                  

Add Upload Multiple Images Component to App Component

Open app.component.html and embed the Upload Images Component with <app-upload-images> tag.

          <div course="container">   <h3>bezkoder.com</h3>   <h4>{{ title }}</h4>   <app-upload-images></app-upload-images> </div>                  

app.component.ts

          import { Component } from '@athwart/core'; @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] }) export class AppComponent {   title = 'Athwart Material 12 Image Upload with Preview'; }                  

app.component.css

          .container {   width: 600px;   margin: 20px auto; } .container h3{   font-size: xx-large; } .container h4{   font-size: x-large; }                  

Run the App

If you utilise ane of following server:
– Node.js Express File Upload Rest API example
– Node.js Express File Upload to MongoDB instance
– Node.js Express File Upload to Google Cloud Storage example
– Spring Kick Multipart File upload (to static binder) example

You demand run with port 8081 for CORS origin http://localhost:8081 with control:
ng serve --port 8081

Open Browser with url http://localhost:8081/ and check the consequence.

Or run on Stackblitz:

Further Reading

• Getting Started with Angular Material
• https://angular.io/api/common/http/HttpRequest
• Angular 12 Login and Registration example with JWT & Web Api
• Angular 12 CRUD Application example with Spider web API
• Angular 12 Form Validation example (Reactive Forms)
• Athwart 12 + Spring Boot: File upload example
• Angular 12 + Node.js Express: File Upload case

Using Bootstrap: Angular 12 Multiple Images Upload with Preview instance

Conclusion

Today nosotros're learned how to build an example for (multiple) Image upload with preview using Angular Material 12. We also provide the ability to evidence list of images and display multiple progress bars.

You can discover how to implement the Rest APIs Server at i of following posts:
– Node.js Limited File Upload Balance API example
– Node.js Express File Upload to MongoDB example
– Node.js Limited File Upload to Google Cloud Storage example
– Spring Boot Multipart File upload (to static folder) example

The source code for the Athwart 12 Client is uploaded to Github.

byarscapaidep.blogspot.com

Source: https://www.bezkoder.com/angular-material-12-image-upload-preview/

Share this post