feat(module:upload): support NzUploadFile parameter of `nzIconRende…

…r` (#6283)

- close #6279

components/upload/doc/index.en-US.md

@@ -54,8 +54,8 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
 | `(nzChange)` | A callback function, can be executed when uploading state is changing | `EventEmitter<NzUploadChangeParam>` | - |
 | `[nzDownload]`   | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | `(file: NzUploadFile) => void` | Jump to new TAB |
 | `[nzTransformFile]`   | Customize transform file before request  | `(file: NzUploadFile) => NzUploadTransformFileType` | -  |
-| `[nzIconRender]`   | Custom show icon  | `TemplateRef<void>` | -  |
-| `[nzFileListRender]`   | Custom file list | `TemplateRef<{ $implicit: UploadFile[] }>` | -  |
+| `[nzIconRender]`   | Custom show icon  | `TemplateRef<{ $implicit: NzUploadFile }>` | -  |
+| `[nzFileListRender]`   | Custom file list | `TemplateRef<{ $implicit: NzUploadFile[] }>` | -  |
 
 #### nzChange
 

components/upload/doc/index.zh-CN.md

@@ -55,8 +55,8 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
 | `(nzChange)` | 上传文件改变时的状态 | `EventEmitter<NzUploadChangeParam>` | - |
 | `[nzDownload]`   | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | `(file: NzUploadFile) => void` | 跳转新标签页 |
 | `[nzTransformFile]`   | 在上传之前转换文件。支持返回一个 Observable 对象  | `(file: NzUploadFile) => NzUploadTransformFileType` | -  |
-| `[nzIconRender]`   | 自定义显示 icon  | `TemplateRef<void>` | -  |
-| `[nzFileListRender]`   | 自定义显示整个列表 | `TemplateRef<{ $implicit: UploadFile[] }>` | -  |
+| `[nzIconRender]`   | 自定义显示 icon  | `TemplateRef<{ $implicit: NzUploadFile }>` | -  |
+| `[nzFileListRender]`   | 自定义显示整个列表 | `TemplateRef<{ $implicit: NzUploadFile[] }>` | -  |
 
 #### nzChange
 

components/upload/interface.ts

@@ -3,9 +3,9 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Observable, Subscription } from 'rxjs';
-
+import { TemplateRef } from '@angular/core';
 import { IndexableObject, NzSafeAny } from 'ng-zorro-antd/core/types';
+import { Observable, Subscription } from 'rxjs';
 
 /** Status */
 export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
@@ -89,3 +89,5 @@ export interface NzUploadXHRArgs {
   onSuccess?(ret: NzSafeAny, file: NzUploadFile, xhr: NzSafeAny): void;
   onError?(err: NzSafeAny, file: NzUploadFile): void;
 }
+
+export type NzIconRenderTemplate = TemplateRef<{ $implicit: NzUploadFile }>;

components/upload/upload-list.component.html

@@ -51,7 +51,7 @@
       </ng-template>
     </ng-template>
     <ng-template #iconNode let-file>
-      <ng-container *ngIf="!iconRender; else iconRender">
+      <ng-container *ngIf="!iconRender; else customIconRender">
         <ng-container [ngSwitch]="listType">
           <ng-container *ngSwitchCase="'picture'">
             <ng-container *ngIf="file.isUploading; else iconNodeFileIcon">
@@ -66,6 +66,11 @@
           <i *ngSwitchDefault nz-icon [nzType]="file.isUploading ? 'loading' : 'paper-clip'"></i>
         </ng-container>
       </ng-container>
+      <ng-template
+        #customIconRender
+        [ngTemplateOutlet]="iconRender"
+        [ngTemplateOutletContext]="{ $implicit: file }"
+      ></ng-template>
       <ng-template #iconNodeFileIcon>
         <i nz-icon [nzType]="file.isImageUrl ? 'picture' : 'file'" nzTheme="twotone"></i>
       </ng-template>

components/upload/upload-list.component.ts

@@ -16,13 +16,12 @@ import {
   Input,
   NgZone,
   OnChanges,
-  TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { Observable } from 'rxjs';
 
-import { NzShowUploadList, NzUploadFile, NzUploadListType } from './interface';
+import { NzIconRenderTemplate, NzShowUploadList, NzUploadFile, NzUploadListType } from './interface';
 
 const isImageFileType = (type: string): boolean => !!type && type.indexOf('image/') === 0;
 
@@ -76,7 +75,7 @@ export class NzUploadListComponent implements OnChanges {
   @Input() onDownload?: (file: NzUploadFile) => void;
   @Input() previewFile?: (file: NzUploadFile) => Observable<string>;
   @Input() previewIsImage?: (file: NzUploadFile) => boolean;
-  @Input() iconRender: TemplateRef<NzSafeAny> | null = null;
+  @Input() iconRender: NzIconRenderTemplate | null = null;
   @Input() dir: Direction = 'ltr';
 
   private genErr(file: NzUploadFile): string {

components/upload/upload.component.ts

@@ -26,6 +26,7 @@ import { InputBoolean, InputNumber, toBoolean } from 'ng-zorro-antd/core/util';
 import { NzI18nService, NzUploadI18nInterface } from 'ng-zorro-antd/i18n';
 
 import {
+  NzIconRenderTemplate,
   NzShowUploadList,
   NzUploadChangeParam,
   NzUploadFile,
@@ -110,7 +111,7 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy {
   @Input() nzPreviewIsImage?: (file: NzUploadFile) => boolean;
   @Input() nzTransformFile?: (file: NzUploadFile) => NzUploadTransformFileType;
   @Input() nzDownload?: (file: NzUploadFile) => void;
-  @Input() nzIconRender: TemplateRef<NzSafeAny> | null = null;
+  @Input() nzIconRender: NzIconRenderTemplate | null = null;
   @Input() nzFileListRender: TemplateRef<void> | null = null;
 
   @Output() readonly nzChange: EventEmitter<NzUploadChangeParam> = new EventEmitter<NzUploadChangeParam>();