Showing the preview of the selected image file through input before taking any action on it such as uploading it to the server is one of the common requirement in many applications. We will implement the same in this example using Angular 13+. We are using Bootstrap card for the UI, you can use any CSS of your choice.

Before selecting the image

After selecting

Component HTML:

<div class="card mb-3 mt-5 " style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-md-4">
            <img *ngIf="isImageSelected" [src]="imagePreviewSrc" class="img-fluid rounded-start" alt="...">
            <svg *ngIf="!isImageSelected" xmlns="http://www.w3.org/2000/svg" width="96" height="96"
                fill="currentColor" class="bi bi-image mt-3 ms-5 " viewBox="0 0 16 16">
                <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
                <path
                    d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z" />
            </svg>
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">Select an Image</h5>
                <input type="file" class="mt-3" (change)="showPreview($event)">
            </div>
        </div>
    </div>
</div>

In the above component HTML file, we are displaying either a placeholder icon or the preview of the image based on whether user has selected an image or not. We then have an input element on which we did event binding to the change event and passing the details of the event through $event.

TS file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'howtojs-singleimagepreview',
  templateUrl: './singleimagepreview.component.html',
  styleUrls: ['./singleimagepreview.component.css']
})
export class SingleimagepreviewComponent implements OnInit {

  imagePreviewSrc: string | ArrayBuffer | null | undefined = '';
  isImageSelected: boolean = false;

  constructor() { }

  ngOnInit(): void {
  }

  showPreview(event: Event) {
    let selectedFile = (event.target as HTMLInputElement).files?.item(0)

    if (selectedFile) {
      if (["image/jpeg", "image/png", "image/svg+xml"].includes(selectedFile.type)) {
        let fileReader = new FileReader();
        fileReader.readAsDataURL(selectedFile);

        fileReader.addEventListener('load', (event) => {
          this.imagePreviewSrc = event.target?.result;
          this.isImageSelected = true
        })
      }
    } else {
      this.isImageSelected = false
    }
  }

}

In the above code, we are telling TypeScript that the target of the Event was an Input element and accessing the selected file. If there is a file selected, we are then checking if it is an image or not. If it is an image, we are using the FileReader object of the browser to read the selected file and assign the read value as the source of the image. If there is no file selected, then we are displaying a placeholder image.

The same functionality can be achieved by many other ways in Angular, such as by using Template Driven or Reactive forms etc., For the simplistic reason, we didn’t use any extra module.

If you want to implement the same using Vanilla JavaScript, check this post how to show the preview of the selected image in JavaScript