refactor(module:upload): refactor upload

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

@@ -41,6 +41,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | `[nzShowUploadList]` | Whether to show default upload list, could be an object to specify `showPreviewIcon` and `showRemoveIcon` individually | `Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }` | true |
 | `[nzShowButton]` | Show upload button | boolean | true |
 | `[nzWithCredentials]` | ajax upload with cookie sent | boolean | false |
+| `[nzOpenFileDialogOnClick]` | click open file dialog | boolean | true |
 | `[nzPreview]` | A callback function, will be executed when file link or preview icon is clicked. NOTICE: Muse be use `=>` to define the method. | `(file: UploadFile) => void` | - |
 | `[nzRemove]` | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is `false` or a Observable. NOTICE: Muse be use `=>` to define the method. | (file: UploadFile) => `boolean｜Observable` | -   |
 | `(nzChange)` | A callback function, can be executed when uploading state is changing | EventEmitter | - |

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

@@ -42,6 +42,7 @@ title: Upload
 | `[nzShowUploadList]` | 是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon | `Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }` | true |
 | `[nzShowButton]` | 是否展示上传按钮 | boolean | true |
 | `[nzWithCredentials]` | 上传请求时是否携带 cookie | boolean | false |
+| `[nzOpenFileDialogOnClick]` | 点击打开文件对话框 | boolean | true |
 | `[nzPreview]` | 点击文件链接或预览图标时的回调；注意：务必使用 `=>` 定义处理方法。 | `(file: UploadFile) => void` | - |
 | `[nzRemove]` | 点击移除文件时的回调，返回值为 false 时不移除。支持返回 `Observable` 对象；注意：务必使用 `=>` 定义处理方法。 | (file: UploadFile) => `boolean｜Observable` | 无   |
 | `(nzChange)` | 上传文件改变时的状态 | EventEmitter | - |

components/upload/interface.ts

@@ -49,6 +49,7 @@ export interface ZipButtonOptions {
   accept?: string | string[];
   action?: string;
   directory?: boolean;
+  openFileDialogOnClick?: boolean;
   beforeUpload?: (file: UploadFile, fileList: UploadFile[]) => boolean | Observable<any>;
   customRequest?: (item: any) => Subscription;
   data?: {} | ((file: UploadFile) => {});

components/upload/nz-upload-btn.component.ts

@@ -1,6 +1,5 @@
 import { HttpClient, HttpEvent, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
 import {
-  ChangeDetectorRef,
   Component,
   ElementRef,
   HostListener,
@@ -34,14 +33,14 @@ export class NzUploadBtnComponent implements OnInit, OnChanges, OnDestroy {
 
   @ViewChild('file') file: ElementRef;
 
-  // region: fields
+  // #region fields
   @Input() classes: {} = {};
   @Input() options: ZipButtonOptions;
+  // #endregion
 
-  // endregion
   @HostListener('click')
   onClick(): void {
-    if (this.options.disabled) {
+    if (this.options.disabled || !this.options.openFileDialogOnClick) {
       return;
     }
     (this.file.nativeElement as HTMLInputElement).click();
@@ -87,8 +86,7 @@ export class NzUploadBtnComponent implements OnInit, OnChanges, OnDestroy {
     hie.value = '';
   }
 
-  // tslint:disable-next-line:no-any
-  private traverseFileTree(files: any): void {
+  private traverseFileTree(files: DataTransferItemList): void {
     // tslint:disable-next-line:no-any
     const _traverseFileTree = (item: any, path: string) => {
       if (item.isFile) {
@@ -107,7 +105,8 @@ export class NzUploadBtnComponent implements OnInit, OnChanges, OnDestroy {
         });
       }
     };
-    for (const file of files) {
+    // tslint:disable-next-line:no-any
+    for (const file of files as any) {
       _traverseFileTree(file.webkitGetAsEntry(), '');
     }
   }
@@ -263,21 +262,22 @@ export class NzUploadBtnComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  // region: styles
+  // #region styles
+
   private prefixCls = 'ant-upload';
 
-  setClassMap(): void {
+  private setClassMap(): void {
     const classMap = {
       [ this.prefixCls ]              : true,
       [ `${this.prefixCls}-disabled` ]: this.options.disabled,
       ...this.classes
     };
     this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
-    this.cd.detectChanges();
   }
 
-  // endregion
-  constructor(@Optional() private http: HttpClient, private el: ElementRef, private updateHostClassService: NzUpdateHostClassService, private cd: ChangeDetectorRef) {
+  // #endregion
+
+  constructor(@Optional() private http: HttpClient, private el: ElementRef, private updateHostClassService: NzUpdateHostClassService) {
     if (!http) {
       throw new Error(`Not found 'HttpClient', You can import 'HttpClientModule' in your root module.`);
     }

components/upload/nz-upload-list.component.ts

@@ -1,5 +1,5 @@
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, ElementRef, Input, OnChanges, SimpleChange, SimpleChanges } from '@angular/core';
+import { Component, ElementRef, Input, OnChanges } from '@angular/core';
 
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 
@@ -23,7 +23,8 @@ import { ShowUploadListInterface, UploadFile, UploadListType } from './interface
   preserveWhitespaces: false
 })
 export class NzUploadListComponent implements OnChanges {
-  // region: fields
+  // #region fields
+
   // tslint:disable-next-line:no-any
   @Input() locale: any = {};
   @Input() listType: UploadListType;
@@ -32,20 +33,23 @@ export class NzUploadListComponent implements OnChanges {
   @Input() onPreview: (file: UploadFile) => void;
   @Input() onRemove: (file: UploadFile) => void;
 
-  // endregion
-  // region: styles
+  // #endregion
+
+  // #region styles
+
   private prefixCls = 'ant-upload-list';
 
-  setClassMap(): void {
+  private setClassMap(): void {
     const classMap = {
       [ this.prefixCls ]                      : true,
       [ `${this.prefixCls}-${this.listType}` ]: true
     };
     this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
   }
 
-  // endregion
-  // region: render
+  // #endregion
+
+  // #region render
 
   handlePreview(file: UploadFile, e: Event): void {
     if (!this.onPreview) {
@@ -64,11 +68,12 @@ export class NzUploadListComponent implements OnChanges {
     return;
   }
 
-  // endregion
+  // #endregion
+
   constructor(private el: ElementRef, private updateHostClassService: NzUpdateHostClassService) {
   }
 
-  ngOnChanges(changes: { [P in keyof this]?: SimpleChange } & SimpleChanges): void {
+  ngOnChanges(): void {
     this.setClassMap();
   }
 }