preview image in angular 8

Solutions on MaxInterview for preview image in angular 8 by the best coders in the world

showing results for - "preview image in angular 8"
Valery
09 Sep 2018
1<form [formGroup]="uploadForm" (ngSubmit)="submit()">
2  <!-- Select File -->
3  <input type="file" accept="image/*" (change)="showPreview($event)" />
4
5  <!-- Image Preview -->
6  <div class="imagePreview" *ngIf="imageURL && imageURL !== ''">
7    <img [src]="imageURL" [alt]="uploadForm.value.name">
8  </div>
9
10  <!-- Assign Image Alt -->
11  <input formControlName="name" placeholder="Enter name">
12
13  <button type="submit">Submit</button>
14</form>
Jona
25 Jan 2019
1import { Component, OnInit } from '@angular/core';
2import { FormBuilder, FormGroup } from "@angular/forms";
3
4@Component({
5  selector: 'app-file-upload',
6  templateUrl: './file-upload.component.html',
7  styleUrls: ['./file-upload.component.css']
8})
9
10export class FileUploadComponent implements OnInit {
11  imageURL: string;
12  uploadForm: FormGroup;
13
14  constructor(public fb: FormBuilder) {
15    // Reactive Form
16    this.uploadForm = this.fb.group({
17      avatar: [null],
18      name: ['']
19    })
20  }
21
22  ngOnInit(): void { }
23
24
25  // Image Preview
26  showPreview(event) {
27    const file = (event.target as HTMLInputElement).files[0];
28    this.uploadForm.patchValue({
29      avatar: file
30    });
31    this.uploadForm.get('avatar').updateValueAndValidity()
32
33    // File Preview
34    const reader = new FileReader();
35    reader.onload = () => {
36      this.imageURL = reader.result as string;
37    }
38    reader.readAsDataURL(file)
39  }
40
41  // Submit Form
42  submit() {
43    console.log(this.uploadForm.value)
44  }
45
46}
queries leading to this page
image preview in angular 10angular preview imagepreview image in angular 8image preview angular by urlangular show image previewupload image angular 10preview image angular 12how to capture image in angularangular image upload with previewimage preview using angularangular preview an imagepreview image angularpreview image in angularjsupload image preview angular2image file preview angularhow to preview image file from file object angularupload button with preview angularhow to display image in angular 8how to convert angular js image to angular 8the preview of the image in angular 9angular ngxgallerycomponent preview imageangular image preview componentlink preview angular 8image preview angular componentsimage preview in angular plunkershow image preview angulardisplay preview of image in angularangular image link previewhow to show image in preview angularimage upload angular previewhow to image input preview angular 8 exampleangularjs image preview componentpreview files in angularangular image preview galleryangular preview image uploadangular image upload with preview examplepreview file in angularimage preview angularfile upload with preview angular 9angular preview uploaded filepreviet upload file angulkarurl preview image angularhow to show preview image in angular 8image preview of a file in angularimage preview angular 10dynamic image preview angularhow to load dynamic images in angular 7angular 8 display image preview in htmljs image preview code on angularangular image input previewupload image previw angularimage preview in angularangular browse image and previewangular image previewpreview image in angular 8