Multiple file extension validation using Angular

Question

I'm trying to validate the file type for multiple file uploads but it says "errors" not found. Please let me know if I'm way off and if so what would be a better way to check file type for multiple files. Thank you!

test-data.component.ts


testDataFileType = "doc,docx,xls,xlsx,pdf,application/msword,application/msexcel,application/pdf";


tdmForm=this.fb.group({
requirement:this.fb.array([this.fb.control('', [Validators.required, fileExtensionValidator(this.testDataFileType)])])
});

constructor(public fb: FormBuilder,){}

file-extension-validator.directive.ts


export function fileExtensionValidator(validExt: string): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      let forbidden = true;
      if (control.value) {
        const fileExt = control.value.split('.').pop();
        validExt.split(',').forEach(ext => {
          if (ext.trim() == fileExt) {
            forbidden = false;
          }
        });
      }
      return forbidden ? { 'inValidExt': true } : null;
    };
  }

test-data.component.html

     <file-upload [acceptedFileType]="testDataFileType" imagePath="upload_files.png" 
      typeOfFile="requirement"[files]="requirement"></file-upload>
      <div *ngIf="isFormSubmitted && this.requirement.length == 0" class="text-error">
        <ng-container>You must upload a file.</ng-container>
      </div>
      <div *ngFor="let f of this.requirement; index as i">
      <div *ngIf="this.requirement[i].errors?.inValidExt">Invalid file type.</div>
    </div>

I see a lot of code, but not a lot of explanation. What line of code is triggering the "error not found"? Is this a compile time error or a run time error? Does your code compile? Can you provide a runnable sample? — JeffryHouser
– JeffryHouser, Commented Mar 22, 2021 at 3:30
Thank you for your response. <div *ngIf="this.requirement[i].errors?.inValidExt">Invalid file type.</div> It says the "errors?" doesn't exist from this line of code. It compiles. A run time error. — Renee
– Renee, Commented Mar 22, 2021 at 14:31

JeffryHouser · Accepted Answer · 2021-03-23 00:52:12Z

0

If the problem is in the HTML Template; I do see a few possibilities.

First, you are looping over this.requirement with the *ngFor. Inside the loop you can access the index variable, instead of this.requirement a second time.

Second, the error tells you exactly what the problem is. The errors variable does not existe on at least one of the objects in the this.requirement array. You can probably get around this by adding another safe navigation operator--like you already are doing on the errors object.

Try this as the last few lines of your HTML Template file:

<div *ngFor="let f of this.requirement; index as i">
  <div *ngIf="f?.errors?.inValidExt">Invalid file type.</div>
</div>

answered Mar 23, 2021 at 0:52

JeffryHouser

39.4k4 gold badges41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple file extension validation using Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related