upload-images.component.html

<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"
  [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>