how to validate for input type file-size in reactive form

Question

I am not getting FileList for selected file. When we console the event.target.files[0], it show undefined. Expected - If we get the event.target.files[0], then we can access file-size.

HTMl

 <small *ngIf="FileUpload.errors?.fileSizeValidator" class="text-danger">File size is required</small>

fileSizeValidator.TS

import { AbstractControl, FormControl } from "@angular/forms";
export function fileSizeValidator(event: any) {
  return function(control: FormControl) {
    // return (control: AbstractControl): { [key: string]: any } | null => {
    const file = control.value;
    if (file) {
      //   var file_list = e.files.items(0);
      console.log(event.currentFiles + "eventttttttttttttttttttttt");
      var path = file.replace(/^.*[\\\/]/, "");
      const fileSize = FileList[0];

      const fileSizeInKB = Math.round(fileSize / 1024);

      if (fileSizeInKB >= 12) {
        return {
          requiredFileType: true
        };
      } else {
        return null;
      }
      return null;
    }
    return null;
  };
}

component.ts

this.addSlot
        .get("FileUpload")
        .setValidators([
          Validators.required,
          FileValidator.validate,
          fileSizeValidator(event),
          requiredFileType(["jpg", "png", "txt"])
        ]);

matt_lethargic · Accepted Answer · 2020-05-19 14:41:19Z

Solution

requireFileTypeValidator.ts

import { AbstractControl, FormControl } from "@angular/forms";
export function requiredFileType(type: string[]) {
  return function(control: FormControl) {
    // return (control: AbstractControl): { [key: string]: any } | null => {
    const file = control.value;
    var existValue: boolean = false;
    if (file) {

      var path = file.replace(/^.*[\\\/]/, "");

      const extension = path.split(".")[1].toUpperCase();
      for (var i = 0; i < type.length; i++) {
        let typeFile = type[i].toUpperCase();
        if (typeFile === extension.toUpperCase()) {
          existValue = true;
        }
      }
      if (existValue == true) {
        return null;
      } else {
        return {
          requiredFileType: true
        };
      }
    }
    return null;
  };
}

fileSizeValidator.ts

    import { AbstractControl, FormControl } from "@angular/forms";
    export function fileSizeValidator(files: FileList) {
      return function(control: FormControl) {
        // return (control: AbstractControl): { [key: string]: any } | null => {
        const file = control.value;
        if (file) {
          var path = file.replace(/^.*[\\\/]/, "");
          const fileSize = files.item(0).size;
          const fileSizeInKB = Math.round(fileSize / 1024);
          if (fileSizeInKB >= 19) {
            return {
              fileSizeValidator: true
            };
          } else {
            return null;
          }
        }
        return null;
      };
    }

Acomponent.ts

import { requiredFileType } from "../../../shared/requireFileTypeValidator";
import { fileSizeValidator } from "../../../shared/file-size.validator";

        export AComponent {
          UploadValue: boolean = false;
          fileChangeFunCalled: boolean = false;

         fileChange(files: FileList) {
            this.fileChangeFunCalled = true;
            if (this.uploadPanel == true && this.fileChangeFunCalled == true) {
              this.filesNum = { ...files };
              this.FileUpload.setValidators([
                Validators.required,
                requiredFileType(["jpg", "png", "txt"]),
                fileSizeValidator(files)
              ]);
              this.FileUpload.updateValueAndValidity();
              const fileSizeOrg = files.item(0).size;
              const fileSizeInKB = Math.round(fileSizeOrg / 1024);
              this.fileSize = fileSizeInKB;
              var extname = files.item(0).type;
              this.fileType = extname.split("/")[1].toUpperCase();
            }
          }
     handleFileInput() {
        this.uploadPanel = true;
        this.fileChangeFunCalled = false;
      }

 @HostListener("window:focus", ["$event"])
  onFocus(event: FocusEvent): void {
    if (this.uploadPanel == true && this.fileChangeFunCalled == false) {
      this.closePanel = true;
      this.addSlot
        .get("FileUpload")
        .setValidators([
          Validators.required,
          requiredFileType(["jpg", "png", "txt"])
        ]);
      this.addSlot.get("FileUpload").updateValueAndValidity();
    }
  }
        }

AComponent.html

 <div class="form-group row" *ngIf="elemHideshow">
        <label
          for="FileUpload"
          class="label offset-sm-2 col-sm-2 col-form-label"
          >Upload Drop Mail :</label
        >
        <div class="col-sm-5">
          <input
            type="file"
            formControlName="FileUpload"
            [class.is-invalid]="FileUpload.invalid && uploadPanel"
            class="form-control"
            (change)="fileChange($event.target.files)"
            (click)="handleFileInput()"
            #inputTypeFile
          />
          <!-- {{ requiredFileType() }} -->
          <!-- <button onclick="document.getElementById('abc').click()">
            choose file
          </button> -->
          <div *ngIf="FileUpload.invalid && uploadPanel">
            <small *ngIf="FileUpload.errors?.required" class="text-danger"
              >File is required</small
            >
            <small
              *ngIf="FileUpload.errors?.requiredFileType"
              class="text-danger"
              >{{ fileType }} type is not allowed</small
            >
            <small
              *ngIf="FileUpload.errors?.fileSizeValidator"
              class="text-danger"
              >{{ fileSize }} KB size is not allowed.</small
            >
          </div>
        </div>
      </div>

Balaji.J.B · Accepted Answer · 2020-01-15 08:15:46Z

0

First, you should remove the event: any to the interface [define the type], if you would have done this. It would have given you an idea of what is happening. Why the event is undefined.

event: {} //define the interface

answered Jan 15, 2020 at 8:15

Balaji.J.B

6347 silver badges14 bronze badges

Comments

Mayank Sudden · Accepted Answer · 2020-01-15 10:41:07Z

0

i have done this way. export function fileSizeValidator(event: {})

But not getting FileList. could you edit the above code? If i will get fileList then validator will work in reactive form.

answered Jan 15, 2020 at 10:41

Mayank Sudden

2151 gold badge6 silver badges11 bronze badges

Collectives™ on Stack Overflow

how to validate for input type file-size in reactive form

HTMl

fileSizeValidator.TS

component.ts

3 Answers 3

requireFileTypeValidator.ts

fileSizeValidator.ts

Acomponent.ts

AComponent.html

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

HTMl

fileSizeValidator.TS

component.ts

3 Answers 3

requireFileTypeValidator.ts

fileSizeValidator.ts

Acomponent.ts

AComponent.html

Comments

Comments

Comments

Related