Merge pull request #759 from ant-design/fix-upload

fix: uploadList should under the controll of beforeUpload #757

components/upload/demo/beforeUpload.md

+# 限制用户上传的文件
+
+- order: 7
+
+可以通过 `beforeUpload` 在文件上传之前进行干预，如限制用户只能上传 JPG 文件。
+
+---
+
+````jsx
+import { Upload, Button, Icon, message } from 'antd';
+
+const props = {
+  action: '/upload.do',
+  beforeUpload: function(file) {
+    const isJPG = file.type === 'image/jpeg';
+    if (!isJPG) {
+      message.error('只能上传 JPG 文件哦！');
+    }
+    return isJPG;
+  }
+};
+
+ReactDOM.render(
+  <Upload {...props}>
+    <Button type="ghost">
+      <Icon type="upload" /> 点击上传
+    </Button>
+  </Upload>
+, document.getElementById('components-upload-demo-beforeupload'));
+````

components/upload/index.jsx

@@ -8,6 +8,10 @@ const prefixCls = 'ant-upload';
 function noop() {
 }
 
+function T() {
+  return true;
+}
+
 // Fix IE file.status problem
 // via coping a new Object
 function fileToObject(file) {
@@ -55,6 +59,8 @@ const AntUpload = React.createClass({
     };
   },
   onStart(file) {
+    if (this.recentUploadStatus === false) return;
+
     let targetItem;
     let nextFileList = this.state.fileList.concat();
     if (file.length > 0) {
@@ -142,6 +148,10 @@ const AntUpload = React.createClass({
     targetItem.status = 'error';
     this.handleRemove(targetItem);
   },
+  beforeUpload(file) {
+    this.recentUploadStatus = this.props.beforeUpload(file);
+    return this.recentUploadStatus;
+  },
   handleRemove(file) {
     let fileList = this.removeFile(file);
     if (fileList) {
@@ -170,6 +180,7 @@ const AntUpload = React.createClass({
       data: {},
       accept: '',
       onChange: noop,
+      beforeUpload: T,
       showUploadList: true,
       listType: 'text', // or pictrue
       className: '',
@@ -197,6 +208,7 @@ const AntUpload = React.createClass({
       onError: this.onError,
       onProgress: this.onProgress,
       onSuccess: this.onSuccess,
+      beforeUpload: this.beforeUpload,
     });
     let uploadList;
     if (this.props.showUploadList) {

components/upload/index.md

@@ -26,6 +26,7 @@
 | showUploadList | 可选参数, 是否展示 uploadList, 默认开启                  | Boolean     | true  |
 | multiple   | 可选参数, 是否支持多选文件，支持 `ie10+`                     | Boolean     | false |
 | accept     | 可选参数, 接受上传的文件类型, 详见 input accept Attribute    | String      | 无    |
+| beforeUpload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 `false` 或者 Promise 则停止上传。**注意：该方法不支持老 IE**。 | Function    | 无    |
 | onChange   | 可选参数, 上传文件改变时的状态，详见 onChange                | Function    | 无    |
 | listType   | 上传列表的内建样式，支持两种基本样式 `text` or `picture`     | String      | 'text'|
 | className  | 自定义类名                                                   | String      | 无    |