I have come across a straightforward method through which we can show the image preview to the user before uploading image to the server.We will also learn to apply validation for uploading only images using HTML5 new FileReader()
api.
In order to show you Angular 8 image preview demo, you must install Node.js and Angular CLI in your machine. If you are beginner then follow this tutorial: Set up Node JS
Run command to set up Angular CLI globally:
npm install @angular/cli -g
Enter command and hit enter to set up Angular 8 project:
ng new angular-image-preview? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
cd angular-image-preview
Run command to create component to manage the file preview in Angular 8.
ng g c fileUploadCREATE src/app/file-upload/file-upload.component.css (0 bytes)
CREATE src/app/file-upload/file-upload.component.html (26 bytes)
CREATE src/app/file-upload/file-upload.component.spec.ts (657 bytes)
CREATE src/app/file-upload/file-upload.component.ts (288 bytes)
Import ReactiveFormsModule
service in app.module.ts
file.
import { ReactiveFormsModule } from ‘@angular/forms’;@NgModule({
imports: [
ReactiveFormsModule
],
})export class AppModule { }
In the next step, go to file.upload.component.html
file and include the following code.
<form [formGroup]=“uploadForm” (ngSubmit)=“submit()”>
<!-- Select File -->
<input type=“file” accept=“image/*” (change)=“showPreview($event)” /><!-- Image Preview -->
<div class=“imagePreview” *ngIf=“imageURL && imageURL !== ‘’”>
<img [src]=“imageURL” [alt]=“uploadForm.value.name”>
</div><!-- Assign Image Alt -->
<input formControlName=“name” placeholder=“Enter name”><button type=“submit”>Submit</button>
</form>
The HTML’s <input type=“file”>
element is used to deal with files. To accept only image files we are using HTML5’s accept attribute and passed “Image/"
attribute in it. The accept attribute allows user to pick the file through input dialog box, you can allow various file types with accept attribute.
Below are the file extension can be set using accept attribute
<input accept="file_type | audio/ | video/* | image/* | media_type”>
We declared the (change)=“…”
event, so whenever any change occurs in the value, the image data will be updated as per the file picked by the user.
To show the image preview in Angular 8, we declared the img
HTML tag and bind the src tag to the variable. We will assign the image URL to the src variable using the new FileReader()
method.
Go to file-upload.component.ts
file and add the given below code inside of it.
import { Component, OnInit } from ‘@angular/core’;
import { FormBuilder, FormGroup } from “@angular/forms”;@Component({
selector: ‘app-file-upload’,
templateUrl: ‘./file-upload.component.html’,
styleUrls: [‘./file-upload.component.css’]
})export class FileUploadComponent implements OnInit {
imageURL: string;
uploadForm: FormGroup;constructor(public fb: FormBuilder) {
// Reactive Form
this.uploadForm = this.fb.group({
avatar: [null],
name: [‘’]
})
}ngOnInit(): void { }
// Image Preview
showPreview(event) {
const file = (event.target as HTMLInputElement).files[0];
this.uploadForm.patchValue({
avatar: file
});
this.uploadForm.get(‘avatar’).updateValueAndValidity()// File Preview const reader = new FileReader(); reader.onload = () => { this.imageURL = reader.result as string; } reader.readAsDataURL(file)
}
// Submit Form
submit() {
console.log(this.uploadForm.value)
}}
FormGroup
service to uploadForm at the beginning.(event.target as HTMLInputElement)
formControlName
with the HTML element as we already did for the name property. Therefore we will be using Angular 8’s patchValue({ })
service to bind the image valueupdateValueAndValidity()
method informs Angular whenever the user makes any change. Technically this method tells Angular and Recalculates the value and validation status of the control.Finally, we are done with Angular 8 Image Preview tutorial. I hope you loved this tutorial, please share it with others.
Further reading
☞ To become an Outstanding AngularJs Developer - part 1
☞ To become an Outstanding AngularJs Developer - part 2
☞ To become an effective Angular developer, you need to learn 19 things in this article
☞ Angular 8 (formerly Angular 2) - The Complete Guide
☞ Manage reactive form controls with form groups in Angular 8
☞ Angular 8 HttpClient & Http Tutorial – Build and Consume RESTful API
This post was originally published here
#angular #angular-js #node-js #html5