text: In this article we are going to discuss about showing a preview image while uploading. This can be achieved by using very less code. Let's check below example
  Preview image while uploading
  import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '<div>' + '<input type="file" (change)="showPreviewImage($event)">' + '<img [src]="localUrl" *' + '</div>', }) export class AppComponent { localUrl: any[]; constructor() { } showPreviewImage(event: any) { if (event.target.files && event.target.files[0]) { var reader = new FileReader(); reader.onload = (event: any) => { this.localUrl = event.target.result; } reader.readAsDataURL(event.target.files[0]); } } }
  While clicking on showPreviewImage method we are taking the selected image url and assigning to localUrl. We can a show a preview image and upload the selected file/image to backend as well. Check this link for that: - File upload and send data to backend. Here I have used *ngIf to hide the preview image section until it is available. You can do more things using Angular 4 ngIf. Check the difference between Angular 2 ngIf and Angular 4 ngIf here.
  We are done. You can use css to improve the look and feel. In this article we have discussed about showing a preview image while uploading.
  Related Info
  1. File/Image upload validation- Angular 4
  2. File/Image upload and send data to backend
  3. Rating star component - Angular 4
  4. Date filtering and formatting - Angular 4
  how would I turn this into a multiple image field with multiple previews?
  Yes that is possible, but I haven't yet written about it.
  Is there any way to rotate the image to vertical without using css?
  how to adjust size of the image?
  The demo page isn't loading for me.