update upload detail

components/upload/demo/inplace.md

@@ -24,7 +24,7 @@ const Demo = React.createClass({
     if (info.file.status === 'done') {
       this.setState({
         // Get this url from response in real world.
-        imageUrl: 'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg',
+        imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
       });
     }
   },
@@ -52,21 +52,22 @@ ReactDOM.render(<Demo />, mountNode);
 ```
 
 ```css
-#components-upload-demo-inplace .avatar-uploader,
+.avatar-uploader,
-#components-upload-demo-inplace .avatar-uploader-trigger,
+.avatar-uploader-trigger,
-#components-upload-demo-inplace .avatar {
+.avatar {
   width: 150px;
   height: 150px;
 }
-#components-upload-demo-inplace .avatar-uploader {
+.avatar-uploader {
   display: block;
-  border: 1px solid #d9d9d9;
+  border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
 }
-#components-upload-demo-inplace .avatar-uploader-trigger {
+.avatar-uploader-trigger {
   display: table-cell;
   vertical-align: middle;
   font-size: 28px;
+  color: #999;
 }
 ```

components/upload/demo/picture-card.md

@@ -36,8 +36,8 @@ const ImageUploadList = React.createClass({
         uid: -1,
         name: 'xxx.png',
         status: 'done',
-        url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+        thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
       }],
       onPreview: (file) => {
         this.setState({
@@ -52,12 +52,17 @@ const ImageUploadList = React.createClass({
           <Icon type="plus" />
           <div className="ant-upload-text">Upload</div>
         </Upload>
-        <a href="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" target="_blank" rel="noopener noreferrer" className="upload-example">
+        <a
-          <img alt="example" src="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" />
+          href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="upload-example"
+        >
+          <img alt="example" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
           <span>sample</span>
         </a>
         <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
-          <img alt="example" src={this.state.previewImage} />
+          <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
         </Modal>
       </div>
     );

components/upload/demo/picture-style.md

@@ -24,14 +24,14 @@ const props = {
     uid: -1,
     name: 'xxx.png',
     status: 'done',
-    url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-    thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+    thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
   }, {
     uid: -2,
     name: 'yyy.png',
     status: 'done',
-    url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-    thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+    thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
   }],
 };
 

components/upload/style/index.less

@@ -208,6 +208,8 @@
       width: 48px;
       height: 48px;
       display: block;
+      overflow: hidden;
+      border-radius: @border-radius-sm;
     }
 
     .@{upload-item}-thumbnail.@{iconfont-css-prefix}:before {
@@ -221,7 +223,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       margin: 0 0 0 8px;
-      line-height: 42px;
+      line-height: 44px;
       transition: all 0.3s ease;
       padding-left: 48px;
       padding-right: 8px;

components/upload/uploadList.tsx

@@ -30,12 +30,11 @@ export default class UploadList extends React.Component<UploadListProps, any> {
   }
 
   handlePreview = (file, e) => {
-    e.preventDefault();
+    const { onPreview } = this.props;
-    const onPreview = this.props.onPreview;
     if (!onPreview) {
       return;
     }
-
+    e.preventDefault();
     return onPreview(file);
   }
 
@@ -81,7 +80,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
             <a
               className={`${prefixCls}-list-item-thumbnail`}
               onClick={e => this.handlePreview(file, e)}
-              href={file.url}
+              href={file.thumbUrl || file.url}
               target="_blank" rel="noopener noreferrer"
             >
               <img src={file.thumbUrl || file.url} alt={file.name} />
@@ -137,9 +136,9 @@ export default class UploadList extends React.Component<UploadListProps, any> {
                   >
                     <Icon type="eye-o" />
                   </a>
-                  <Icon type="delete" onClick={() => this.handleClose(file)} />
+                  <Icon type="delete" title="Remove file" onClick={() => this.handleClose(file)} />
                 </span>
-              ) : <Icon type="cross" onClick={() => this.handleClose(file)} />
+              ) : <Icon type="cross" title="Remove file" onClick={() => this.handleClose(file)} />
             }
           </div>
           {progress}