CODEWITHSUNDEEP
javascriptimagevalidationangular
rafaelcb21
rafaelcb21

Reputation: 13304

Angular 2 - Validate if a file is really an image

In Angular 2 how to validate if a file is really an image?

isImage(file: File): boolean {
    return /^image\//.test(file.type);
}

In the above function after an upload, simply change the .txt to .png file extension it returns true eg: text.txt to text.png

Upvotes: 0

Views: 13816

Answers (4)

Ramkumar
Ramkumar

Reputation: 31

You can check easily with file type. If example it it's video type will be "video/format" or if it's image it will be "image/format". you can use this.

event.target.files[0].type.includes('image')

Upvotes: 2

carkod
carkod

Reputation: 2230

HTML <input> has an attribute which you can use.

<input accept=".png, .text" />

Upvotes: 3

Alf Moh
Alf Moh

Reputation: 7437

Here is a custom directive for that. You can use it for other file types too. Just add/remove your required extensions in RegExp

import { FormControl, NG_VALIDATORS, Validator } from '@angular/forms';
import { Directive } from '@angular/core';

@Directive({
  selector: '[FileTypeValidator]',
  providers: [
    {
      provide: NG_VALIDATORS, useExisting: FileTypeValidator, multi: true
    }
  ]
})
export class FileTypeValidator implements Validator {

  static validate(c: FormControl): { [key: string]: any } {
    if (c.value) {
      if (c.value[0]) {
        return FileTypeValidator.checkExtension(c);
      };
    }
  }

  private static checkExtension(c: FormControl) {
    let valToLower = c.value[0].name.toLowerCase();
    let regex = new RegExp("(.*?)\.(jpg|png|jpeg)$"); //add or remove required extensions here
    let regexTest = regex.test(valToLower);
    return !regexTest ? { "notSupportedFileType": true } : null;
  }

  validate(c: FormControl): { [key: string]: any } {
    return FileTypeValidator.validate(c);
  }

}

In your component,

this.form = new FormGroup({
        file: new FormControl("",    [FileTypeValidator.validate])
    });

Upvotes: 0

Lucas T&#233;treault
Lucas T&#233;treault

Reputation: 953

The following is not specifically about Angular but it does answer the question of doing client side file type validation in javascript. It should be easy enough to adapt the solution for your needs: How to check file MIME type with javascript before upload?

Upvotes: 1

Related Questions