Image preview before upload in angular 5

Question

.html

Answer 1

to preview the chosen image before uploading this code will help you it,s easy. it,s preview only image if anything else then it,s will give you error this code is for component.ts

  public imagePath;
 imgURL: any;
 public message: string;
 preview(files) {
 if (files.length === 0)
  return;
 var mimeType = files[0].type;
 if (mimeType.match(/image\/*/) == null) {
  this.message = "Only images are supported.";
  return;
 }
 var reader = new FileReader();
 this.imagePath = files;
 reader.readAsDataURL(files[0]); 
 reader.onload = (_event) => { 
 this.imgURL = reader.result; 
}
}

and these lines of code in component view

 {{message}}