Upload multiple files using HTML5 FormData in Angular 14

I have followed the below tutorial.

service file:

import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class UploadService {

  baseUrl = "https://file.io";

constructor(private http: HttpClient) { }

upload(file: File): Observable<HttpEvent<any>> {

  const formData: FormData = new FormData();
  formData.append("file", file);

  const req = new HttpRequest('POST', `${this.baseUrl}`, formData, {
    reportProgress: true,
    responseType: 'json'
  });

  return this.http.request(req);
}

getFiles(): Observable<any> {
  return this.http.get(`${this.baseUrl}`);
}

}

html file:

<div *ngFor="let progressInfo of progressInfos" class="mb-2">
    <span>{{ progressInfo.fileName }}</span>
    <div class="progress">
      <div
        class="progress-bar progress-bar-info progress-bar-striped"
        role="progressbar"
        attr.aria-valuenow="{{ progressInfo.percentage }}"
        aria-valuemin="0"
        aria-valuemax="100"
        [ngStyle]="{ width: progressInfo.percentage + '%' }"
      >
        {{ progressInfo.percentage }}%
      </div>
    </div>
  </div>
  
  <label class="btn btn-default">
    <input type="file" accept="image/*" multiple (change)="selectFiles($event)" />
  </label>
  
  <button
    class="btn btn-success" type="button"
    [disabled]="!selectedFiles"
    (click)="uploadFiles()"
  >
    Upload
  </button>
  
  <div class="alert alert-light" role="alert">{{ message }}</div>
  
  <div class="card">
    <div class="card-header">List of Images</div>
    <ul
      class="list-group list-group-flush"
      *ngFor="let file of fileInfos | async"
    >
      <li class="list-group-item">
        <p><a href="{{ file.url }}">{{ file.name }}</a></p>
        <img src="{{ file.url }}" alt="{{ file.name }}" height="80px">
      </li>
    </ul>
</div>

 ts. file:

import { Component, OnInit } from '@angular/core';
import { UploadService } from './upload.service';
import {GetVariableService} from '../property/getVariable.service';
import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})

export class UploadComponent{

  theFileName1: any;
  selectedFiles: FileList;
  progressInfos: Array<any> = [];
  message = '';
  fileInfos: Observable<any>;

  setText1(theFileName1: string) {
    this.getVariable.theFileName1 = theFileName1;
  }
  
  constructor(private fileService: UploadService, private getVariable: GetVariableService) {}

  ngOnInit() {
    this.fileInfos = this.fileService.getFiles();
  }

  selectFiles(event:any) {
    this.progressInfos = [];
  
    const files = event.target.files;
    let isImage = true;
  
    for (let i = 0; i < files.length; i++) {
      if (files.item(i).type.match('image.*')) {
        continue;
      } else {
        isImage = false;
        alert('invalid format!');
        break;
      }
    }
  
    if (isImage) {
      this.selectedFiles = event.target.files;
    } else {
      event.srcElement.percentage = null;
    }
  }

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

  upload(idx:any, file:File) {
    this.progressInfos[idx] = { value: 0, fileName: file.name };
  
    this.fileService.upload(file).subscribe(
      event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.progressInfos[idx].percentage = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.fileInfos = this.fileService.getFiles();
        }
      },
      err => {
        this.progressInfos[idx].percentage = 0;
        this.message = 'Could not upload the file:' + file.name;
      });
  }
}

I found a new version of that project. this one uses angular 8 but the new one is for angular 14.