update upload

components/upload/demo/drag-simple.md

@@ -27,5 +27,6 @@ ReactDOM.render(
 ````css
 #components-upload-demo-drag-simple {
   width: 246px;
+  height: 146px;
 }
 ````

components/upload/demo/drag.md

@@ -27,3 +27,9 @@ ReactDOM.render(
   document.getElementById('components-upload-demo-drag')
 );
 ````
+
+````css
+#components-upload-demo-drag {
+  height: 180px;
+}
+````

components/upload/index.jsx

@@ -180,15 +180,9 @@ const AntUpload = React.createClass({
     }
   },
   onFileDrop(e) {
-    if (e.type === 'dragover') {
-      this.setState({
-        dragState: 'dragover'
-      });
-    } else {
-      this.setState({
-        dragState: 'drop'
-      });
-    }
+    this.setState({
+      dragState: e.type
+    });
   },
   clearProgressTimer() {
     clearInterval(this.progressTimer);
@@ -206,37 +200,38 @@ const AntUpload = React.createClass({
       uploadList = <UploadList items={this.state.fileList} onRemove={this.handleManualRemove} />;
     }
     if (type === 'drag') {
-      let dragUploadingClass = '';
-      let fileList = this.state.fileList;
-      const dragState = this.state.dragState;
-      for (let i = 0; i < fileList.length; i ++) {
-        if (fileList[i].status === 'uploading') {
-          dragUploadingClass = ` ${prefixCls}-drag-uploading ${dragState === 'drop' ? '' : `${prefixCls}-drag-hover`}`;
-          break;
-        }
-      }
+      let dragUploadingClass = this.state.fileList.some((file) => {
+        return file.status === 'uploading';
+      }) ? `${prefixCls}-drag-uploading` : '';
+
+      let draggingClass = this.state.dragState === 'dragover'
+                           ? `${prefixCls}-drag-hover` : '';
       return (
-        <div className={prefixCls + ' ' + prefixCls + '-drag-area'} onDrop={this.onFileDrop} onDragOver={this.onFileDrop}>
-          <div className={prefixCls + ' ' + prefixCls + '-drag' + dragUploadingClass}>
+        <span>
+          <div className={prefixCls + ' ' + prefixCls + '-drag '
+            + dragUploadingClass + ' ' + draggingClass}
+            onDrop={this.onFileDrop}
+            onDragOver={this.onFileDrop}
+            onDragLeave={this.onFileDrop}>
             <Upload {...props}>
               <div className={prefixCls + '-drag-container'}>
                 {this.props.children}
               </div>
             </Upload>
           </div>
-          { uploadList }
-        </div>
+          {uploadList}
+        </span>
       );
     } else if (type === 'select') {
       return (
-        <div>
+        <span>
           <div className={prefixCls + ' ' + prefixCls + '-select'}>
             <Upload {...props}>
               {this.props.children}
             </Upload>
           </div>
-          { uploadList }
-        </div>
+          {uploadList}
+        </span>
       );
     }
   }

package.json

@@ -60,7 +60,7 @@
     "rc-tooltip": "~3.1.0",
     "rc-tree": "~0.18.1",
     "rc-trigger": "~1.0.6",
-    "rc-upload": "~1.6.4",
+    "rc-upload": "~1.7.0",
     "rc-util": "~3.0.1",
     "react-slick": "~0.9.1",
     "reqwest": "~2.0.5",

style/components/upload.less

@@ -17,16 +17,16 @@
 
   &.@{upload-prefix-cls}-drag {
     border: 1px dashed #d9d9d9;
-    transition: all 0.3s ease;
+    transition: border-color 0.3s ease;
     cursor: pointer;
     border-radius: @border-radius-base;
     text-align: center;
     width: 100%;
-    height: 180px;
+    height: 100%;
     position: relative;
 
     &.@{upload-prefix-cls}-drag-hover {
-      border-color: tint(@primary-color, 20%);
+      border: 2px dashed tint(@primary-color, 20%);
     }
 
     > span {