preview image in angular 8
<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>preview image in angular 8
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)
}
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
