psp_panel/src/app/shared/components/uploadFile/upload-file.component.html

<p-fileupload
  [name]="name"
  [accept]="accept"
  [maxFileSize]="maxSize"
  mode="advanced"
  (onSelect)="onSelectedFile($event)"
>
  <ng-template
    #header
    let-files
    let-chooseCallback="chooseCallback"
    let-clearCallback="clearCallback"
    let-uploadCallback="uploadCallback"
    class="hidden"
    [style]="{ display: 'none' }"
  >
  </ng-template>
  <ng-template
    #content
    let-files
    let-chooseCallback="chooseCallback"
    let-uploadedFiles="uploadedFiles"
    let-removeFileCallback="removeFileCallback"
    let-removeUploadedFileCallback="removeUploadedFileCallback"
  >
    <div class="flex flex-col gap-8 pt-4">
      @if (filePreview) {
        <div class="flex justify-center">
          <div class="inline-block relative">
            <img [src]="filePreview" alt="Preview" class="max-h-52 rounded-lg object-contain" />
            <div class="absolute left-2 top-2 flex gap-2">
              <button
                pButton
                type="button"
                icon="pi pi-pencil"
                severity="warn"
                size="small"
                (click)="chooseCallback()"
              ></button>
              <button
                pButton
                type="button"
                icon="pi pi-trash"
                severity="danger"
                size="small"
                (click)="onDeleteFilePreview()"
              ></button>
            </div>
          </div>
        </div>
      } @else {
        <div class="flex items-center justify-center flex-col cursor-pointer py-5 w-full" (click)="chooseCallback()">
          <i class="pi pi-cloud-upload border-2! rounded-full! p-8! text-4xl! text-muted-color!"></i>
          <p class="mt-6 mb-0">فایل مورد نظر خود را در اینجا رها کنید</p>
        </div>
      }
      <!-- <div *ngIf="files?.length > 0">
                <h5>Pending</h5>
                <div class="flex flex-wrap gap-4">
                    <div *ngFor="let file of files; let i = index" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
                        <div>
                            <img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
                        </div>
                        <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
                        <div>{{ formatSize(file.size) }}</div>
                        <p-badge value="Pending" severity="warn" />
                        <p-button icon="pi pi-times" (click)="onRemoveTemplatingFile($event, file, removeFileCallback, index)" [outlined]="true" [rounded]="true" severity="danger" />
                    </div>
                </div>
            </div>
            <div *ngIf="uploadedFiles?.length > 0">
                <h5>Completed</h5>
                <div class="flex flex-wrap gap-4">
                    <div *ngFor="let file of uploadedFiles; let i = index" class="card m-0 px-12 flex flex-col border border-surface items-center gap-4">
                        <div>
                            <img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
                        </div>
                        <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
                        <div>{{ formatSize(file.size) }}</div>
                        <p-badge value="Completed" class="mt-4" severity="success" />
                        <p-button icon="pi pi-times" (onClick)="removeUploadedFileCallback(index)" [outlined]="true" [rounded]="true" severity="danger" />
                    </div>
                </div>
            </div> -->
    </div>
  </ng-template>
  <ng-template #file></ng-template>
</p-fileupload>