file-uploader.component.html

<div class="root">
  <!--
    Note: `uc-config` is the main component we use to configure File Uploader.
    It's important to all the context-related File Uploader to have the same `ctx-name` attribute.

    See more: https://uploadcare.com/docs/file-uploader/configuration/
    Available options: https://uploadcare.com/docs/file-uploader/options/

    Also note: Some options currently are not available via `uc-config`,
    but may be set via CSS properties or CSS classes. E.g. accent colors or darkmode

    Here they are: https://uploadcare.com/docs/file-uploader/styling/
  -->
  <uc-config
    #config
    [attr.ctx-name]="uploaderCtxName"
    pubkey="a6ca334c3520777c0045"
    multiple="true"
    sourceList="local, url, camera, dropbox, gdrive"
    confirmUpload="false"
    removeCopyright="true"
    imgOnly="true"
  ></uc-config>

  <uc-file-uploader-regular
    [attr.ctx-name]="uploaderCtxName"
    [class]="uploaderClassName"
    [class.uc-dark]="theme === 'dark'"
    [class.uc-light]="theme === 'light'"
  ></uc-file-uploader-regular>

  <uc-upload-ctx-provider
    #ctxProvider
    [attr.ctx-name]="uploaderCtxName"
  ></uc-upload-ctx-provider>

  <div class="previews">
    @for (file of files; track file.cdnUrl) {
      <div class="preview">
        <img
          class="preview-image"
          src="{{ file.cdnUrl + '/-/preview/-/resize/x200/' }}"
          width="100"
          [alt]="file.fileInfo.originalFilename"
          [title]="file.fileInfo.originalFilename"
        />

        <button
          class="preview-remove-button"
          type="button"
          (click)="handleRemoveClick(file.uuid)"
        >×</button>
      </div>
    }
  </div>
</div>