NgFileValidator

Check the image file of a Buffer/Uint8Array that matched expected image MIME-type

Install

$ npm i angular-file-validator

Usage

Its just involve only two steps

a. import NgFileValidatorLibModule in app.modules.ts

b. import FileCheck in our desired component

App.Module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { ReactiveFormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
import { NgFileValidatorLibModule } from "@ng/file-validator";

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

App.component.ts

import { Component, OnInit, } from '@angular/core';
import { FormGroup, FormControl, Validators, } from '@angular/forms';
import { FileCheck } from '@ng/file-validator' // <-------

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup
  filePreview: String


  ngOnInit(): void {

    this.form = new FormGroup({

      image: new FormControl(null, {
        validators: Validators.required,
        asyncValidators: [FileCheck.ngFileValidator(['png', 'jpeg'])] // <-------
      })
    })
  }

Error Message

In case of Invalid file type it will throw error :

{
  invalidMimeType: true;
}

Note:

To handle edit case this validator will not throw error in case of string being patch to image form field It will only check if field of type File.

For example :

this.form.setValue({
  image: post.imagePath, // <--- post containg imagePath of type String  | it will be considered as valid
});

Supported file types

It can check the following file formates

1. png
2. jpg
3. jpeg
4. gif

so we can use as [FileCheck.ngFileValidator(['png', 'jpeg','gif','jpeg'])]