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

<div
  fxLayout="row wrap"
  fxFlex="100"
  class="ucap-ui-file-upload-queue-container"
>
  <div
    fxLayout="column"
    fxFlex="100"
    fxFlex.gt-xs="100"
    fxFlex.gt-md="25"
    *ngFor="let file of uploadFiles"
  >
    <div fxLayout="row">
      <div>
        <mat-icon>image</mat-icon>
      </div>
      <div>{{ file.name }}</div>
      <div (click)="onClickClear(file)">
        <mat-icon>clear</mat-icon>
      </div>
    </div>
    <div fxLayout="row">
      <mat-progress-bar mode="determinate" value="40"> </mat-progress-bar>
    </div>
  </div>

  <div *ngIf="uploadItems" fxLayout="column">
    <div>여기에 파일을 Drop하시면 업로드 됩니다.</div>
    <div>
      <div
        fxLayout="row"
        fxFlex="100"
        fxFlex.gt-xs="20"
        fxFlex.gt-md="25"
        *ngFor="let item of uploadItems"
      >
        <mat-icon>image</mat-icon>
      </div>
    </div>
  </div>
</div>