nova-live/projects/live-app/src/app/components/upload/upload.component.html

<div
  class="upload-file"
  [style.grid-template-columns]="
    'repeat(' + showBlockNum + ', ' + fileWidth + 'px)'
  "
  [style.width]="boxWidth + 'px'"
>
  @for (item of fileList; track $index) {
  <div class="image-content">
    @switch (type) { @case ('image') {
    <img
      (click)="onPreview(item.url)"
      [style.height]="fileHeight + 'px'"
      [src]="item.url"
      alt=""
    />
    } @case ('video') {
    <!-- <video [style.height]="fileHeight + 'px'" [src]="item.url" alt=""></video> -->
    <video
      [style.height]="fileHeight + 'px'"
      controls=""
      preload="meta"
      name="media"
      controlslist="nodownload"
    >
      <source [src]="item.url" type="video/mp4" />
    </video>
    } @default {
    <ion-icon
      name="document-outline"
      [style.height]="fileHeight + 'px'"
      [style.width]="fileWidth + 'px'"
    ></ion-icon>
    } }
    <div class="del" (click)="onDelete($index)">
      <ion-icon name="close-outline"></ion-icon>
    </div>
  </div>
  } @if (fileList.length < maxlenght) {
  <div class="up-bloak" [style.height]="fileHeight + 'px'">
    <ion-icon
      [style.height]="fileHeight - 48 + 'px'"
      [style.width]="fileWidth - 48 + 'px'"
      name="cloud-upload-outline"
    ></ion-icon>
    <input
      type="file"
      [multiple]="multiple"
      (change)="onAdd($event)"
      [accept]="accept"
    />
  </div>
  }
</div>
@if (currentPreviewImg) {
<div class="preview" (click)="currentPreviewImg = ''">
  <img [src]="currentPreviewImg" alt="" />
</div>
}