feat(module:upload): add upload component

PROGRESS.md

@@ -24,7 +24,7 @@
 | card | √ | 100% | 100% | vthinkxie | - |
 | carousel | √ | 100% | 100% | vthinkxie | - |
 | collapse | √ | 100% | 100% | vthinkxie | - |
-| table | √ | 100% | 100% | vthinkxie | √ | 
+| table | √ | 100% | 100% | vthinkxie | √ |
 | tabs | √ | 100% | 100% | vthinkxie | - |
 | timeline | √ | 100% | 100% | vthinkxie | - |
 | alert | √ | 100% | 100% | vthinkxie | - |
@@ -44,7 +44,7 @@
 | transfer | √ | 100% | 100% | cipchk | x |
 | avatar | √ | 100% | 100% | cipchk | x |
 | list | √ | 100% | 100% | cipchk | x |
-| upload | x | x | x | cipchk | - |
+| upload | √ | 100% | 100% | cipchk | x |
 | anchor | x | x | x | cipchk | - |
 | backtop | x | x | x | cipchk | - |
 | divider | √ | 100% | 100% | cipchk | x |

components/index.less

@@ -38,5 +38,6 @@
 @import "./divider/style/index";
 @import "./form/style/index";
 @import "./list/style/index";
+@import "./upload/style/index";
 
 @import "./core/style/index";

components/index.ts

@@ -43,13 +43,15 @@ import { NzTagModule } from './tag/nz-tag.module';
 import { NzTimelineModule } from './timeline';
 import { NzToolTipModule } from './tooltip/nz-tooltip.module';
 import { NzTransferModule } from './transfer';
+import { NzUploadModule } from './upload';
 
 export * from './button';
 export * from './divider';
 export * from './grid';
 export * from './layout';
 export * from './dropdown';
 export * from './menu';
+export * from './upload';
 export * from './transfer';
 export * from './i18n';
 export * from './locale/index';
@@ -122,6 +124,7 @@ export * from './modal/public-api';
     NzFormModule,
     NzListModule,
     NzI18nModule,
+    NzUploadModule,
     NzModalModule
   ]
 })

components/upload/demo/avatar.md

@@ -0,0 +1,18 @@
+---
+order: 1
+title:
+  zh-CN: 用户头像
+  en-US: Avatar
+---
+
+## zh-CN
+
+点击上传用户头像，并使用 `nzBeforeUpload` 限制用户上传的图片格式和大小。
+
+> `nzBeforeUpload` 的返回值可以是一个 Observable 以支持也支持异步检查。
+
+## en-US
+
+Click to upload user's avatar, and validate size and format of picture with `nzBeforeUpload`.
+
+> The return value of function `nzBeforeUpload` can be a Observable to check asynchronously.

components/upload/demo/avatar.ts

@@ -0,0 +1,75 @@
+import { Component } from '@angular/core';
+import { NzMessageService, UploadFile } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-upload-avatar',
+  template: `
+  <nz-upload class="avatar-uploader"
+    nzAction="https://jsonplaceholder.typicode.com/posts/"
+    nzName="avatar"
+    nzListType="picture-card"
+    [nzShowUploadList]="false"
+    [nzBeforeUpload]="beforeUpload"
+    (nzChange)="handleChange($event)">
+    <ng-container *ngIf="!avatarUrl">
+      <i class="anticon anticon-plus"></i>
+      <div class="ant-upload-text">Upload</div>
+    </ng-container>
+    <img *ngIf="avatarUrl" [src]="avatarUrl" class="avatar">
+  </nz-upload>
+  `,
+  styles: [
+    `
+    :host ::ng-deep .avatar-uploader > .ant-upload {
+      width: 128px;
+      height: 128px;
+    }
+    :host ::ng-deep .ant-upload-select-picture-card i {
+      font-size: 32px;
+      color: #999;
+    }
+    :host ::ng-deep .ant-upload-select-picture-card .ant-upload-text {
+      margin-top: 8px;
+      color: #666;
+    }
+  `
+  ]
+})
+export class NzDemoUploadAvatarComponent {
+  loading = false;
+  avatarUrl: string;
+
+  constructor(private msg: NzMessageService) {}
+
+  beforeUpload = (file: File) => {
+    const isJPG = file.type === 'image/jpeg';
+    if (!isJPG) {
+      this.msg.error('You can only upload JPG file!');
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      this.msg.error('Image must smaller than 2MB!');
+    }
+    return isJPG && isLt2M;
+  }
+
+  private getBase64(img: File, callback: (img: {}) => void): void {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result));
+    reader.readAsDataURL(img);
+  }
+
+  handleChange(info: { file: UploadFile }): void {
+    if (info.file.status === 'uploading') {
+      this.loading = true;
+      return;
+    }
+    if (info.file.status === 'done') {
+      // Get this url from response in real world.
+      this.getBase64(info.file.originFileObj, (img: string) => {
+        this.loading = false;
+        this.avatarUrl = img;
+      });
+    }
+  }
+}

components/upload/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 点击上传
+  en-US: Upload by clicking
+---
+
+## zh-CN
+
+经典款式，用户点击按钮弹出文件选择框。
+
+## en-US
+
+Classic mode. File selection dialog pops up when upload button is clicked.

components/upload/demo/basic.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-upload-basic',
+  template: `
+  <nz-upload
+    nzAction="https://jsonplaceholder.typicode.com/posts/">
+    <button nz-button>
+      <i class="anticon anticon-upload"></i><span>Click to Upload</span>
+    </button>
+  </nz-upload>
+  `
+})
+export class NzDemoUploadBasicComponent {}

components/upload/demo/drag.md

@@ -0,0 +1,18 @@
+---
+order: 5
+title:
+  zh-CN: 拖拽上传
+  en-US: Drag and Drop
+---
+
+## zh-CN
+
+把文件拖入指定区域，完成上传，同样支持点击上传。
+
+设置 `nzMultiple` 后，在 `IE10+` 可以一次上传多个文件。
+
+## en-US
+
+You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.
+
+We can upload serveral files at once in modern browsers by giving the input the `nzMultiple` attribute.

components/upload/demo/drag.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { NzMessageService, UploadFile } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-upload-drag',
+  template: `
+  <nz-upload
+    nzType="drag"
+    [nzMultiple]="true"
+    [nzLimit]="2"
+    nzAction="https://jsonplaceholder.typicode.com/posts/"
+    (nzChange)="handleChange($event)">
+    <p class="ant-upload-drag-icon">
+      <i class="anticon anticon-inbox"></i>
+    </p>
+    <p class="ant-upload-text">Click or drag file to this area to upload</p>
+    <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+  </nz-upload>
+  `,
+  styles: [
+    `
+  :host ::ng-deep nz-upload { display: block; }
+  :host ::ng-deep .ant-upload.ant-upload-drag { height: 180px; }
+  `
+  ]
+})
+export class NzDemoUploadDragComponent {
+  constructor(private msg: NzMessageService) {}
+  // tslint:disable-next-line:typedef
+  handleChange({ file, fileList }): void {
+    const status = file.status;
+    if (status !== 'uploading') {
+      console.log(file, fileList);
+    }
+    if (status === 'done') {
+      this.msg.success(`${file.name} file uploaded successfully.`);
+    } else if (status === 'error') {
+      this.msg.error(`${file.name} file upload failed.`);
+    }
+  }
+}

components/upload/demo/file-list.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 已上传的文件列表
+  en-US: Default Files
+---
+
+## zh-CN
+
+使用 `nzFileList` 设置已上传的内容。
+
+## en-US
+
+Use `nzFileList` for uploaded files when page init.

components/upload/demo/file-list.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-upload-file-list',
+  template: `
+  <nz-upload
+    nzAction="https://jsonplaceholder.typicode.com/posts/"
+    [nzFileList]="fileList">
+    <button nz-button>
+      <i class="anticon anticon-upload"></i><span>Upload</span>
+    </button>
+  </nz-upload>
+  `
+})
+export class NzDemoUploadFileListComponent {
+  fileList = [
+    {
+      uid: 1,
+      name: 'xxx.png',
+      status: 'done',
+      response: 'Server Error 500', // custom error message to show
+      url: 'http://www.baidu.com/xxx.png'
+    },
+    {
+      uid: 2,
+      name: 'yyy.png',
+      status: 'done',
+      url: 'http://www.baidu.com/yyy.png'
+    },
+    {
+      uid: 3,
+      name: 'zzz.png',
+      status: 'error',
+      response: 'Server Error 500', // custom error message to show
+      url: 'http://www.baidu.com/zzz.png'
+    }
+  ];
+}

components/upload/demo/filter.md

@@ -0,0 +1,26 @@
+---
+order: 4
+title:
+  zh-CN: 过滤器
+  en-US: Filter
+---
+
+## zh-CN
+
+使用 `nzFilter` 对列表进行完全控制，可以实现各种自定义功能，以下演示三种情况：
+
+1) 上传列表数量的限制。
+
+2) 读取远程路径并显示链接。
+
+3) 按照服务器返回信息筛选成功上传的文件。
+
+## en-US
+
+You can gain full control over filelist by configuring `nzFilter`. You can accomplish all kinds of customed functions. The following shows three circumstances:
+
+1) limit the number of uploaded files.
+
+2) read from response and show file link.
+
+3) filter successfully uploaded files according to response from server.

components/upload/demo/filter.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { UploadFile } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-upload-filter',
+  template: `
+  <nz-upload
+    nzAction="https://jsonplaceholder.typicode.com/posts/"
+    [nzFileList]="fileList"
+    nzMultiple
+    [nzLimit]="2"
+    (nzChange)="handleChange($event)">
+    <button nz-button>
+      <i class="anticon anticon-upload"></i><span>Upload</span>
+    </button>
+  </nz-upload>
+  `
+})
+export class NzDemoUploadFilterComponent {
+  fileList = [
+    {
+      uid: -1,
+      name: 'xxx.png',
+      status: 'done',
+      url: 'http://www.baidu.com/xxx.png'
+    }
+  ];
+
+  // tslint:disable-next-line:no-any
+  handleChange(info: any): void {
+    const fileList = info.fileList;
+    // 2. read from response and show file link
+    if (info.file.response) {
+      info.file.url = info.file.response.url;
+    }
+    // 3. filter successfully uploaded files according to response from server
+    this.fileList = fileList.filter(item => {
+      if (item.response) {
+        return item.response.status === 'success';
+      }
+      return true;
+    });
+  }
+}

components/upload/demo/manually.md

@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: 手动上传
+  en-US: Upload manually
+---
+
+## zh-CN
+
+`nzBeforeUpload` 返回 `false` 后，手动上传文件。
+
+## en-US
+
+Upload files manually after `nzBeforeUpload` returns `false`.