<div class="position-relative"> <nz-upload class="p-image-uploader" [nzDisabled]="disableUpload" [nzShowUploadList]="false" nzAccept = "image/*" [nzAction]="uploadUrl" [nzData]="uploadData" (nzChange)="handleChange($event)"> <!--[nzBeforeUpload]="customUpload">--> <div class="p-box d-flex align-items-center"> <div class="p-upload-icon" *ngIf="!picUrl && !uploading"> <i nz-icon nzType="cloud-upload" nzTheme="outline" [style.font-size]="iconSize + 'em'"></i> <div class="m-3"></div> <span>{{TIP}}</span> <!--<div class="mt-5 p-progress-bar" *ngIf="uploading">--> <!--<div class="p-progress-bg" [style.width]="progress*0.2+'rem'"></div>--> <!--<div class="p-progress-value">{{progress}}%</div>--> <!--</div>--> </div> <div class="p-upload-progress-bg" *ngIf="uploading"> <div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-text"> <fa-icon icon="cloud-upload-alt"></fa-icon> Uploading... </div> </div> <div class="p-preview" *ngIf="!uploading && picUrl " [style.background-image]="picUrl | backgroundImage "> </div> </div> </nz-upload> <div class="p-btn-delete" *ngIf="canDelete" nz-popconfirm nzTitle="Are you sure ?" (nzOnConfirm)="onDelete()" > <i nz-icon nzType="close" nzTheme="outline"></i> </div> </div>