How to perform multiple file upload in Angular

Question

In Angular 14 project, I have this code that performs single file upload. And it's working fine.

component.ts:

  files?: any;
  data1: any;
  mandate!: any;
  url = '';

  constructor(
    private fb: FormBuilder,
    private mandateService: MandateService,
    private router: Router,
    private toastr: ToastrService,
    private bsModalRef: BsModalRef
  ) {
  }

  ngOnInit(): void {
    this.isLoading = true;
    this.approveMandate();
  }

  approvalData(templateDetail: TemplateRef<any>, row: any) {
    this.mandate = row
    this.bsModalRef = this.modalService.show(templateDetail, Object.assign({}, { class: 'gray modal-lg' }));
   }


   onSelectFile(event: any) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();
      let img = event.target.files[0];
      if(img.length == 0)
         return;
      reader.readAsDataURL(img); // read file as data url
      this.files = img;

      reader.onload = (event: any) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
  }

  approveMandate() {
    this.approveMandateForm = this.fb.group({
      MyFile: ['',
      [
        Validators.required,
        RxwebValidators.extension({
          extensions: ["pdf"]
        })
      ]],
    });
  }

  approveValidate() {
    if (!this.approveMandateForm.valid) {
      this.approveMandateForm.markAllAsTouched();
      return;
    }
  }
  get fc() {
    return this.approveMandateForm.controls;
  };

  onApproveMandateSubmitForm(id: any) {
    this.isSubmitted = true;
    // stop here if form is invalid
    if (this.approveMandateForm.invalid) {
      return;
    }
    this.isLoading = true;
    const formData = new FormData();
    if (this.files) {
      formData.append("MyFile", this.files);
    }

    this.mandateService.mandateApproval(id,formData).subscribe({
      next: (res: any) => {
        this.toastr.success(res.message);
        this.isLoading = false;
        this.onClose();
        window.location.reload();
      },
      error: (error) => {
      let errorMessage = '';
      if(error.error instanceof ErrorEvent) {
        errorMessage = error.message;
      } else {
        errorMessage = error.error.message;
      }
      this.toastr.error(errorMessage);
      this.isLoading = false;
      }
    })
  }

  onClose() {
    this.bsModalRef.hide();
  }

component.html:

<button type="button"  class="btn btn-info"  title="APPROVAL" (click)="approvalData(approveMandate, row)"> Approve</button>&nbsp;

<ng-template #approveMandate>
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title pull-left">Mandate Approval</h4>
      <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="onClose()">
        <span aria-hidden="true" class="visually-hidden">&times;</span>
      </button>
    </div>
    <form class="form-horizontal" id="edit-form" [formGroup]="approveMandateForm" (ngSubmit)="onApproveMandateSubmitForm(mandate.id)">
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label for="exampleInputFile"> Mandate Document</label>
              <input
                formControlName="MyFile"
                id="MyFile"
                type="file"
                class="form-control"
                accept=".pdf"
                multiple
                (change)="onSelectFile($event)">
                <div *ngIf="fc['MyFile'].touched && fc['MyFile'].invalid" class="alert alert-danger">
                  <div *ngIf="fc['MyFile'].errors && fc['MyFile'].errors['required']">File Upload is required!</div>
                  <div *ngIf="fc['MyFile'].errors && fc['MyFile'].errors['extensions']">Only PDF File extension is Required!</div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="cancelCreate" class="btn btn-secondary" data-dismiss="modal" (click)="onClose()">Close</button>
        <button type="submit" class="btn btn-success" [disabled]="isLoading" (click)="approveValidate()"><span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span>
          <i class="fa fa-save" aria-hidden="true"></i> Save Changes</button>
      </div>
    </form>
  </div>
</ng-template>

As stated, the code above is working fine for singular file upload. But I need to make little adjustment.

How do I alter my component.ts and component.html to change it to multiple file upload?