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'])]