next-ucap-messenger/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html

<div fxLayout="row wrap" fxFlex="100" class="ucap-file-upload-queue-container">
  <div
    fxLayout="column"
    fxFlex="100"
    fxFlex.gt-xs="100"
    fxFlex.gt-md="25"
    *ngFor="let fileUploadItem of fileUploadItems"
  >
    <div fxLayout="row">
      <div>
        <mat-icon>image</mat-icon>
      </div>
      <div>{{ fileUploadItem.file.name }}</div>
      <!-- <div (click)="onClickClear(fileUploadItem)">
        <mat-icon>clear</mat-icon>
      </div> -->
    </div>
    <div fxLayout="row">
      <mat-progress-bar
        mode="determinate"
        [value]="fileUploadItem.uploadingProgress$ | async"
      >
      </mat-progress-bar>
    </div>
  </div>

  <div *ngIf="uploadItems" fxLayout="column">
    <div>여기에 파일을 Drop하시면 업로드 됩니다.</div>
    <div></div>
  </div>
</div>