upload-image-with-preview.component.html 1.09 KB
Newer Older
1 2
<div class="position-relative">
  <nz-upload class="p-image-uploader" [nzDisabled]="disableUpload"
3 4 5 6 7
    [nzShowUploadList]="false"
    nzAccept = "image/*"
    [nzAction]="uploadUrl"
    [nzData]="uploadData"
    (nzChange)="handleChange($event)">
8 9
    <div class="p-box d-flex align-items-center">
      <div class="p-upload-icon" *ngIf="!picUrl && !uploading">
10
        <i nz-icon type="cloud-upload" theme="outline" [style.font-size]="iconSize + 'em'"></i>
11 12 13 14 15 16
        <div class="m-3"></div>
        <span>{{TIP}}</span>
      </div>
      <div class="p-upload-progress-bg" *ngIf="uploading">
        <div class="i-bg" [style.width]="progress+'%'"></div>
        <div class="i-text">
17
          <fa name="cloud-upload"></fa>
18 19 20 21
          Uploading...
        </div>
      </div>
      <div class="p-preview" *ngIf="!uploading && picUrl "
22
        [style.background-image]="picUrl | backgroundImage ">
23 24 25 26
      </div>
    </div>
  </nz-upload>
  <div class="p-btn-delete" *ngIf="canDelete"
27 28
    nz-popconfirm nzTitle="Are you sure ?"
    (nzOnConfirm)="onDelete()"
29
  >
30
    <i nz-icon type="close" theme="outline"></i>
31 32
  </div>
</div>