Angular: Upload fixed number of files to server

I want to upload 3 files each from it’s own input.

<label class="btn btn-default p-0">
            <input type="file" (change)="selectISRFile($event)" />
          </label>
          <label class="btn btn-default p-0">
            <input type="file" (change)="selectLMPFile($event)" />
          </label>
          <label class="btn btn-default p-0">
            <input type="file" (change)="selectPOCMRFile($event)" />
          </label>
<button
            class="btn btn-success btn-sm"
            (click)="uploadFiles()"
          >
            Upload
          </button>

Component functions looks like this

  selectISRFile(event): void {
    this.selectedFiles[0]= event.target.files;
  }

  selectLMPFile(event): void {
    this.selectedFiles[1] = event.target.files;
  }

  selectPOCMRFile(event): void {
    this.selectedFiles[2] = event.target.files;
  }

  uploadFiles() {
    if (this.selectedFiles) {
      for (let i = 0; i < this.selectedFiles.length; i++) {
        this.upload(i, this.selectedFiles[i]);
      }
    }
  }

I’m getting selectedFiles is undefined

  companyForm: FormGroup;
  selectedFiles?: FileList;
  progressInfos: any[] = [];
  message: string[] = [];
  selectedISRFile?: File;
  selectedLMPFile?: File;
  selectedPOCMRFile?: File;

thank you for your time

Answer

Initialize selectedFiles with empty array

selectedFiles?: File[] = [];

Replace “this.selectedFiles[0]= event.target.files” with below

const file = event.target.files.item(0);
this.selectedFiles.push(file); // file you get from event.target.files;