Angular Reactive Form - File validators for File Upload

File upload fuctionality is a very common use case in applications. Whenever we allow users to upload files to server, we should have both client side and server side validation. Most likely we validates file size and file extension.
In this post, we are going to see the validators for File Upload functionality in Aangular Reactive Form.

file-validations.ts

In file-validations.ts, we have three validators- FileExtension validator, FileMaxSize validator and FIle Minimum size validator.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; const FILE_MAX_SIZE = 2048; const FILE_MIN_SIZE = 1024; export class FileValidations {   public static fileExtensionValidator(     acceptedExtensions: string[]   ): ValidatorFn {     return (control: AbstractControl): ValidationErrors | null => {       if (control.value) {         const ext = control.value.split('.').pop();         if (!acceptedExtensions.includes(ext)) {           return {             fileExtension: {               acceptedExtensions: acceptedExtensions,               actualExtension: ext,             },           };         }       }       return null;     };   }   public static fileMaxSizeValidator(files: FileList): ValidatorFn {     return (): ValidationErrors | null => {       if (files.length > 0) {         if (Math.round(files[0].size / 1024) > FILE_MAX_SIZE) {           return {             fileMaxSize: {               requiredSize: `${Math.round(FILE_MAX_SIZE) / 1024}MB`,               actualSize: `${Math.round(                 Math.round(files[0].size / 1024) / 1024               )}MB`,             },           };         }       }       return null;     };   }   public static fileMinSizeValidator(files: FileList): ValidatorFn {     return (): ValidationErrors | null => {       if (files.length > 0) {         if (Math.round(files[0].size / 1024) < FILE_MIN_SIZE) {           return {             fileMinSize: {               requiredSize: `${Math.round(FILE_MIN_SIZE) / 1024}MB`,               actualSize: `${Math.round(                 Math.round(files[0].size / 1024) / 1024               )}MB`,             },           };         }       }       return null;     };   } }

file-upload.component.ts

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

export class FileUploadComponent {   uploadForm: FormGroup;   acceptedExtensions = ['pdf'];   constructor(private formBuilder: FormBuilder) {     this.uploadForm = this.formBuilder.group({       fileToUpload: [         '',         [           Validators.required,           FileValidations.fileExtensionValidator(this.acceptedExtensions),         ],       ],     });   }   public uploadFile(event: any) {     if (!!event.target.files) {       this.uploadForm         .get('fileToUpload')         ?.addValidators([           FileValidations.fileMaxSizeValidator(event.target.files),           FileValidations.fileMinSizeValidator(event.target.files),         ]);       this.uploadForm.get('fileToUpload')?.updateValueAndValidity();       if (this.uploadForm.valid) {         // To Do : Implement your code here       }     }   }   get fileToUploadControl(): FormControl {     return this.uploadForm.get('fileToUpload') as FormControl;   } }

file-upload.component.html

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<form formgroup="" uploadform="">     <div filetouploadcontrol.invalid="" filetouploadcontrol.touched="" invalid="" ngclass="">         <label>Upload File</label>         <input change="" event="" formcontrolname="fileToUpload" id="fileUpload" type="file" uploadfile="">                     <span class="error" ngif="fileToUploadControl.errors && !!fileToUploadControl.errors['fileExtension']">             Invalid File Extension. Accepted File Extensions-{{acceptedExtensions}}</span>                     <span class="error" ngif="fileToUploadControl.errors && !!fileToUploadControl.errors['fileMaxSize']">             File size excceds. Maximum allowed file size is 2MB</span>                     <span class="error" ngif="fileToUploadControl.errors && !!fileToUploadControl.errors['fileMinSize']">             Minimum allowed file size is 1MB</span>     </div> </form>

You can find the sample code here.