How to preview images before upload in Angular

// image-upload.component.ts
import { Component } from '@angular/core'
import { CommonModule } from '@angular/common'

@Component({
  selector: 'app-image-upload',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="upload-container">
      <input
        type="file"
        accept="image/*"
        (change)="onFileSelected($event)"
        #fileInput
        style="display: none"
      />

      <div class="preview-area" (click)="fileInput.click()">
        <img
          *ngIf="previewUrl; else placeholder"
          [src]="previewUrl"
          alt="Preview"
          class="preview-image"
        />
        <ng-template #placeholder>
          <div class="placeholder">Click to select an image</div>
        </ng-template>
      </div>

      <p *ngIf="error" class="text-danger">{{ error }}</p>

      <button
        *ngIf="previewUrl"
        (click)="upload()"
        [disabled]="uploading"
      >
        {{ uploading ? 'Uploading...' : 'Upload Image' }}
      </button>
    </div>
  `
})
export class ImageUploadComponent {
  previewUrl: string | null = null
  error = ''
  uploading = false
  private selectedFile: File | null = null

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement
    const file = input.files?.[0]

    if (!file) return

    this.error = ''

    if (!file.type.startsWith('image/')) {
      this.error = 'Please select an image file'
      return
    }

    if (file.size > 5 * 1024 * 1024) {
      this.error = 'Image must be smaller than 5MB'
      return
    }

    this.selectedFile = file
    this.readFileAsDataUrl(file)
  }

  private readFileAsDataUrl(file: File): void {
    const reader = new FileReader()
    reader.onload = (e) => {
      this.previewUrl = e.target?.result as string
    }
    reader.readAsDataURL(file)
  }

  async upload(): Promise<void> {
    if (!this.selectedFile) return

    this.uploading = true
    const formData = new FormData()
    formData.append('image', this.selectedFile)

    try {
      const res = await fetch('/api/images', { method: 'POST', body: formData })
      if (!res.ok) throw new Error('Upload failed')
      this.uploading = false
    } catch (err: any) {
      this.error = err.message
      this.uploading = false
    }
  }
}

@Component({
  selector: 'app-drop-image',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div
      class="drop-zone"
      [class.active]="isDragging"
      (dragover)="onDragOver($event)"
      (dragleave)="isDragging = false"
      (drop)="onDrop($event)"
    >
      <img *ngIf="previewUrl" [src]="previewUrl" alt="Preview" />
      <p *ngIf="!previewUrl">Drop an image here</p>
    </div>
  `
})
export class DropImageComponent {
  isDragging = false
  previewUrl: string | null = null

  onDragOver(event: DragEvent): void {
    event.preventDefault()
    this.isDragging = true
  }

  onDrop(event: DragEvent): void {
    event.preventDefault()
    this.isDragging = false
    const file = event.dataTransfer?.files[0]
    if (file?.type.startsWith('image/')) {
      const reader = new FileReader()
      reader.onload = (e) => { this.previewUrl = e.target?.result as string }
      reader.readAsDataURL(file)
    }
  }
}