Image file upload with preview in reactive form

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ImgUploaderComponent } from './components/img-uploader/img-uploader.component';

@NgModule({
  declarations: [
    AppComponent,
    ImgUploaderComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,   
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<form [formGroup]="form" (submit)="onSavePost()">
    <div>
        <button class="file-select" type="button" (click)="filePicker.click()">Pick Image</button>
        <input type="file" #filePicker (change)="onImagePicked($event)">
    </div>
    <div class="image-preview" *ngIf="imagePreview!=='' && imagePreview && form.get('image')!.valid">
        <img [src]="imagePreview" [alt]="form.value.title">
    </div>
    <button color="primary" type="submit">Save File</button>
</form>

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { mimeType } from './mime-type.validator';
import { ImgService } from './img.service';
@Component({
  selector: 'app-img-uploader',
  templateUrl: './img-uploader.component.html',
  styleUrls: ['./img-uploader.component.scss']
})
export class ImgUploaderComponent implements OnInit {
  form: FormGroup = {} as FormGroup;
  imagePreview: string | ArrayBuffer = '';

  constructor(public imgService: ImgService) { }

  ngOnInit(): void {
    this.form = new FormGroup({
      'image': new FormControl(null, { validators: [Validators.required], asyncValidators: [mimeType] }),
    });
  }
  onImagePicked(event: any) {
    const file = event.target!.files[0];
    this.form.patchValue({ image: file });
    this.form.get('image')!.updateValueAndValidity();
    const reader = new FileReader();
    reader.onload = () => {
      this.imagePreview = reader.result!;
    };
    reader.readAsDataURL(file);
  }
  onSavePost() {
    if (this.form.invalid) {
      return;
    }    
    this.imgService.addImg(this.form.value.image);
    this.form.reset();
  }
}

input[type="file"] {
    visibility: hidden;
}

.image-preview {
    height: 5rem;
    margin: 1rem 0;
}

.image-preview img {
    height: 100%;
}

.file-select {
    background: transparent;
    padding: 10px 14px;
    margin: 10px;
    border: 1px solid steelblue;
    border-radius: 20px;
    cursor: pointer;
    &:hover {
        background: tan;
    }
}

[type="submit"] {
    background: transparent;
    padding: 10px 14px;
    margin: 10px;
    border: 1px solid green;
    border-radius: 20px;
    cursor: pointer;
    &:hover {
        background: lightseagreen;
    }
}

import { AbstractControl } from "@angular/forms";
import { Observable, Observer, of } from "rxjs";

export const mimeType = (control: AbstractControl): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> | Observable<null> => {
    if (typeof (control.value) === 'string') {
        return of(null)
    }
    const file = control.value as File;
    const fileReader = new FileReader();
    const frObs = new Observable((observer: Observer<{ [key: string]: any }>) => {
        fileReader.addEventListener("loadend", () => {
            const arr = new Uint8Array(fileReader.result as ArrayBuffer).subarray(0, 4);
            let isValid: boolean = false;
            let header = "";
            for (let i = 0; i < arr.length; i++) {
                header += arr[i].toString(16);
            }
            switch (header) {
                case '89504e47':
                    isValid = true;
                    break;
                case "ffd8ffe0":
                case "ffd8ffe1":
                case "ffd8ffe2":
                case "ffd8ffe3":
                case "ffd8ffe8":
                    isValid = true;
                    break;
                default:
                    isValid = false;
                    break;
            }
            if (isValid) {
                observer.next(null);
            } else {
                observer.next({ invalidMineType: true });
            }
            observer.complete();
        });
        fileReader.readAsArrayBuffer(file);
    });
    return frObs;
};

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ImgService {

  constructor(private http: HttpClient, private router: Router) { }
  apiFile: string = '' //'http://localhost:3000/api/imgFiles'
  addImg(image: File) {
    const imgData = new FormData;
    imgData.append("image", image, 'newImgTitle');
    console.log(imgData);

    this.http.post<{ message: string }>(
      this.apiFile,
      imgData
    ).subscribe((respData) => {
       this.router.navigate(["/"]);
    })
  }
}