Upload and Download file using file.io server in Angular 14

I am trying to upload multiple images to file.io using angular.

It is showing that the files were uploaded but not showing a link to download the files.

In HTML there is a block of code that shows the files and their download links but in the app while running it is not shown!

service file:

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

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

  private 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}`);
  }
}

the 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 implements OnInit{

  theFileName1: any;
  fileInfos: Observable<any>;
  selectedFiles?: FileList;
  progressInfos: any[] = [];
  message: string[] = [];

  previews: string[] = [];
  imageInfos?: Observable<any>;

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

  ngOnInit(): void {
    this.imageInfos = this.fileService.getFiles();
  }

  selectFiles(event: any): void {
    this.message = [];
    this.progressInfos = [];
    this.selectedFiles = event.target.files;
  
    this.previews = [];
    if (this.selectedFiles && this.selectedFiles[0]) {
      const numberOfFiles = this.selectedFiles.length;
      for (let i = 0; i < numberOfFiles; i++) {
        const reader = new FileReader();
  
        reader.onload = (e: any) => {
          console.log(e.target.result);
          this.previews.push(e.target.result);
        };
  
        reader.readAsDataURL(this.selectedFiles[i]);
      }
    }
  }

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

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

the 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.value }}"
        aria-valuemin="0"
        aria-valuemax="100"
        [ngStyle]="{ width: progressInfo.value + '%' }"
      >
        {{ progressInfo.value }}%
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-8">
      <label class="btn btn-default p-0">
        <input type="file" accept="image/*" multiple (change)="selectFiles($event)" />
      </label>
    </div>
  
    <div class="col-4">
      <button
        class="btn btn-success btn-sm" type="button"
        [disabled]="!selectedFiles"
        (click)="uploadFiles()"
      >
        Upload
      </button>
    </div>
  </div>
  
  <div>
    <img *ngFor='let preview of previews' [src]="preview" class="preview">
  </div>
  
  <div *ngIf="message.length" class="alert alert-secondary my-3" role="alert">
    <ul *ngFor="let msg of message; let i = index">
      <li>{{ msg }}</li>
    </ul>
  </div>
  
  <div class="card mt-3">
    <div class="card-header">List of Images</div>
    <ul
      class="list-group list-group-flush"
      *ngFor="let image of imageInfos | async">
      <li class="list-group-item">
        <p><a href="{{ image.url }}">{{ image.name }}</a></p>
        <img src="{{ image.url }}" alt="{{ image.name }}" width="40%" />
      </li>
    </ul>
</div>

here is a screen shot:

https://imageupload.io/30w8zkFad8YJ0S9

https://imageupload.io/3rdcqv6A7j7pcGD