feat: upload add download icon (#18664)

* feat: upload add download icon

* feat: clear up

* feat: log

* empty

* feat: 理解错误

* feat: test

* test

* feat: clean up

* Update components.test.js.snap

* Update demo.test.js.snap

* Update demo.test.js.snap

* Update demo.test.js.snap

* Update demo.test.js.snap

* Update work-with-us.zh-CN.md

* feat: clean up

* fix: showDownloadIcon=false 24px

* fix: More rigorous

* fix: test

* fix: test

* fix: [] key

* fix: hover css

* fix: test

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -17309,7 +17309,7 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
     class="config-upload-list config-upload-list-text"
   >
     <div
-      class="config-upload-list-item config-upload-list-item-done"
+      class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
     >
       <div
         class="config-upload-list-item-info"
@@ -17335,34 +17335,67 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
             </svg>
           </i>
           <span
-            class="config-upload-list-item-name"
+            class="config-upload-list-item-name config-upload-list-item-name-icon-count-2"
             title="xxx.png"
           >
             xxx.png
+            <span
+              class="config-upload-list-item-card-actions "
+            >
+              <a
+                title="Download file"
+              >
+                <i
+                  aria-label="icon: download"
+                  class="anticon anticon-download"
+                  tabindex="-1"
+                  title="Download file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="download"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </i>
+              </a>
+              <a
+                title="Remove file"
+              >
+                <i
+                  aria-label="icon: delete"
+                  class="anticon anticon-delete"
+                  tabindex="-1"
+                  title="Remove file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="delete"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                    />
+                  </svg>
+                </i>
+              </a>
+            </span>
           </span>
         </span>
       </div>
-      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-        tabindex="-1"
-        title="Remove file"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
     </div>
   </div>
 </span>
@@ -17379,7 +17412,7 @@ exports[`ConfigProvider components Upload normal 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class="ant-upload-list-item ant-upload-list-item-done"
+      class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
     >
       <div
         class="ant-upload-list-item-info"
@@ -17405,34 +17438,67 @@ exports[`ConfigProvider components Upload normal 1`] = `
             </svg>
           </i>
           <span
-            class="ant-upload-list-item-name"
+            class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
             title="xxx.png"
           >
             xxx.png
+            <span
+              class="ant-upload-list-item-card-actions "
+            >
+              <a
+                title="Download file"
+              >
+                <i
+                  aria-label="icon: download"
+                  class="anticon anticon-download"
+                  tabindex="-1"
+                  title="Download file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="download"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </i>
+              </a>
+              <a
+                title="Remove file"
+              >
+                <i
+                  aria-label="icon: delete"
+                  class="anticon anticon-delete"
+                  tabindex="-1"
+                  title="Remove file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="delete"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                    />
+                  </svg>
+                </i>
+              </a>
+            </span>
           </span>
         </span>
       </div>
-      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-        tabindex="-1"
-        title="Remove file"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
     </div>
   </div>
 </span>
@@ -17449,7 +17515,7 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class="ant-upload-list-item ant-upload-list-item-done"
+      class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
     >
       <div
         class="ant-upload-list-item-info"
@@ -17475,34 +17541,67 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
             </svg>
           </i>
           <span
-            class="ant-upload-list-item-name"
+            class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
             title="xxx.png"
           >
             xxx.png
+            <span
+              class="ant-upload-list-item-card-actions "
+            >
+              <a
+                title="Download file"
+              >
+                <i
+                  aria-label="icon: download"
+                  class="anticon anticon-download"
+                  tabindex="-1"
+                  title="Download file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="download"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </i>
+              </a>
+              <a
+                title="Remove file"
+              >
+                <i
+                  aria-label="icon: delete"
+                  class="anticon anticon-delete"
+                  tabindex="-1"
+                  title="Remove file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="delete"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                    />
+                  </svg>
+                </i>
+              </a>
+            </span>
           </span>
         </span>
       </div>
-      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-        tabindex="-1"
-        title="Remove file"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
     </div>
   </div>
 </span>

components/locale/default.tsx

@@ -42,6 +42,7 @@ export default {
     removeFile: 'Remove file',
     uploadError: 'Upload error',
     previewFile: 'Preview file',
+    downloadFile: 'Download file',
   },
   Empty: {
     description: 'No Data',

components/locale/zh_CN.tsx

@@ -42,6 +42,7 @@ export default {
     removeFile: '删除文件',
     uploadError: '上传错误',
     previewFile: '预览文件',
+    downloadFile: '下载文件',
   },
   Empty: {
     description: '暂无数据',

components/upload/Upload.tsx

@@ -253,11 +253,12 @@ class Upload extends React.Component<UploadProps, UploadState> {
       showUploadList,
       listType,
       onPreview,
+      onDownload,
       previewFile,
       disabled,
       locale: propLocale,
     } = this.props;
-    const { showRemoveIcon, showPreviewIcon } = showUploadList as any;
+    const { showRemoveIcon, showPreviewIcon, showDownloadIcon } = showUploadList as any;
     const { fileList } = this.state;
     return (
       <UploadList
@@ -265,9 +266,11 @@ class Upload extends React.Component<UploadProps, UploadState> {
         items={fileList}
         previewFile={previewFile}
         onPreview={onPreview}
+        onDownload={onDownload}
         onRemove={this.handleManualRemove}
         showRemoveIcon={!disabled && showRemoveIcon}
         showPreviewIcon={showPreviewIcon}
+        showDownloadIcon={showDownloadIcon}
         locale={{ ...locale, ...propLocale }}
       />
     );

components/upload/UploadList.tsx

@@ -16,6 +16,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
       showInfo: false,
     },
     showRemoveIcon: true,
+    showDownloadIcon: true,
     showPreviewIcon: true,
     previewFile: previewImage,
   };
@@ -56,6 +57,15 @@ export default class UploadList extends React.Component<UploadListProps, any> {
     return onPreview(file);
   };
 
+  handleDownload = (file: UploadFile) => {
+    const { onDownload } = this.props;
+    if (typeof onDownload === 'function') {
+      onDownload(file);
+    } else if (file.url) {
+      window.open(file.url);
+    }
+  };
+
   handleClose = (file: UploadFile) => {
     const { onRemove } = this.props;
     if (onRemove) {
@@ -70,6 +80,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
       listType,
       showPreviewIcon,
       showRemoveIcon,
+      showDownloadIcon,
       locale,
       progressAttr,
     } = this.props;
@@ -125,28 +136,63 @@ export default class UploadList extends React.Component<UploadListProps, any> {
       const infoUploadingClass = classNames({
         [`${prefixCls}-list-item`]: true,
         [`${prefixCls}-list-item-${file.status}`]: true,
+        [`${prefixCls}-list-item-list-type-${listType}`]: true,
       });
       const linkProps =
         typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
-      const preview = file.url ? (
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          className={`${prefixCls}-list-item-name`}
-          title={file.name}
-          {...linkProps}
-          href={file.url}
-          onClick={e => this.handlePreview(file, e)}
+
+      const removeIcon = showRemoveIcon ? (
+        <Icon type="delete" title={locale.removeFile} onClick={() => this.handleClose(file)} />
+      ) : null;
+      const downloadIcon =
+        showDownloadIcon && file.status === 'done' ? (
+          <Icon
+            type="download"
+            title={locale.downloadFile}
+            onClick={() => this.handleDownload(file)}
+          />
+        ) : null;
+      const downloadOrDelete = listType !== 'picture-card' && (
+        <span
+          key="download-delete"
+          className={`${prefixCls}-list-item-card-actions ${
+            listType === 'picture' ? 'picture' : ''
+          }`}
         >
-          {file.name}
-        </a>
+          {downloadIcon && <a title={locale.downloadFile}>{downloadIcon}</a>}
+          {removeIcon && <a title={locale.removeFile}>{removeIcon}</a>}
+        </span>
+      );
+      const listItemNameClass = classNames({
+        [`${prefixCls}-list-item-name`]: true,
+        [`${prefixCls}-list-item-name-icon-count-${
+          [downloadIcon, removeIcon].filter(x => x).length
+        }`]: true,
+      });
+      const preview = file.url ? (
+        [
+          <a
+            key="view"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={listItemNameClass}
+            title={file.name}
+            {...linkProps}
+            href={file.url}
+            onClick={e => this.handlePreview(file, e)}
+          >
+            {file.name}
+          </a>,
+          downloadOrDelete,
+        ]
       ) : (
         <span
-          className={`${prefixCls}-list-item-name`}
+          className={listItemNameClass}
           onClick={e => this.handlePreview(file, e)}
           title={file.name}
         >
           {file.name}
+          {downloadOrDelete}
         </span>
       );
       const style: React.CSSProperties = {
@@ -165,21 +211,14 @@ export default class UploadList extends React.Component<UploadListProps, any> {
           <Icon type="eye-o" />
         </a>
       ) : null;
-      const removeIcon = showRemoveIcon ? (
-        <Icon type="delete" title={locale.removeFile} onClick={() => this.handleClose(file)} />
-      ) : null;
-      const removeIconClose = showRemoveIcon ? (
-        <Icon type="close" title={locale.removeFile} onClick={() => this.handleClose(file)} />
-      ) : null;
-      const actions =
-        listType === 'picture-card' && file.status !== 'uploading' ? (
-          <span className={`${prefixCls}-list-item-actions`}>
-            {previewIcon}
-            {removeIcon}
-          </span>
-        ) : (
-          removeIconClose
-        );
+
+      const actions = listType === 'picture-card' && file.status !== 'uploading' && (
+        <span className={`${prefixCls}-list-item-actions`}>
+          {previewIcon}
+          {file.status === 'done' && downloadIcon}
+          {removeIcon}
+        </span>
+      );
       let message;
       if (file.response && typeof file.response === 'string') {
         message = file.response;

components/upload/__tests__/__snapshots__/demo.test.js.snap

@@ -34,7 +34,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class="ant-upload-list-item ant-upload-list-item-done"
+      class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
     >
       <div
         class="ant-upload-list-item-info"
@@ -60,7 +60,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
             </svg>
           </i>
           <a
-            class="ant-upload-list-item-name"
+            class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
             href="http://www.baidu.com/xxx.png"
             rel="noopener noreferrer"
             target="_blank"
@@ -68,32 +68,65 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
           >
             xxx.png
           </a>
+          <span
+            class="ant-upload-list-item-card-actions "
+          >
+            <a
+              title="Download file"
+            >
+              <i
+                aria-label="icon: download"
+                class="anticon anticon-download"
+                tabindex="-1"
+                title="Download file"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="download"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                  />
+                </svg>
+              </i>
+            </a>
+            <a
+              title="Remove file"
+            >
+              <i
+                aria-label="icon: delete"
+                class="anticon anticon-delete"
+                tabindex="-1"
+                title="Remove file"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                  />
+                </svg>
+              </i>
+            </a>
+          </span>
         </span>
       </div>
-      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-        tabindex="-1"
-        title="Remove file"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
     </div>
     <div
-      class="ant-upload-list-item ant-upload-list-item-done"
+      class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
     >
       <div
         class="ant-upload-list-item-info"
@@ -119,7 +152,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
             </svg>
           </i>
           <a
-            class="ant-upload-list-item-name"
+            class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
             href="http://www.baidu.com/yyy.png"
             rel="noopener noreferrer"
             target="_blank"
@@ -127,32 +160,65 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
           >
             yyy.png
           </a>
+          <span
+            class="ant-upload-list-item-card-actions "
+          >
+            <a
+              title="Download file"
+            >
+              <i
+                aria-label="icon: download"
+                class="anticon anticon-download"
+                tabindex="-1"
+                title="Download file"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="download"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                  />
+                </svg>
+              </i>
+            </a>
+            <a
+              title="Remove file"
+            >
+              <i
+                aria-label="icon: delete"
+                class="anticon anticon-delete"
+                tabindex="-1"
+                title="Remove file"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                  />
+                </svg>
+              </i>
+            </a>
+          </span>
         </span>
       </div>
-      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-        tabindex="-1"
-        title="Remove file"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
     </div>
     <div
-      class="ant-upload-list-item ant-upload-list-item-error"
+      class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
     >
       <div
         class="ant-upload-list-item-info"
@@ -178,7 +244,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
             </svg>
           </i>
           <a
-            class="ant-upload-list-item-name"
+            class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
             href="http://www.baidu.com/zzz.png"
             rel="noopener noreferrer"
             target="_blank"
@@ -186,29 +252,37 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
           >
             zzz.png
           </a>
+          <span
+            class="ant-upload-list-item-card-actions "
+          >
+            <a
+              title="Remove file"
+            >
+              <i
+                aria-label="icon: delete"
+                class="anticon anticon-delete"
+                tabindex="-1"
+                title="Remove file"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                  />
+                </svg>
+              </i>
+            </a>
+          </span>
         </span>
       </div>
-      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-        tabindex="-1"
-        title="Remove file"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
     </div>
   </div>
 </span>
@@ -251,7 +325,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class="ant-upload-list-item ant-upload-list-item-done"
+      class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
     >
       <div
         class="ant-upload-list-item-info"
@@ -277,7 +351,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
             </svg>
           </i>
           <a
-            class="ant-upload-list-item-name"
+            class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
             href="http://www.baidu.com/xxx.png"
             rel="noopener noreferrer"
             target="_blank"
@@ -285,29 +359,62 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
           >
             xxx.png
           </a>
+          <span
+            class="ant-upload-list-item-card-actions "
+          >
+            <a
+              title="Download file"
+            >
+              <i
+                aria-label="icon: download"
+                class="anticon anticon-download"
+                tabindex="-1"
+                title="Download file"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="download"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                  />
+                </svg>
+              </i>
+            </a>
+            <a
+              title="Remove file"
+            >
+              <i
+                aria-label="icon: delete"
+                class="anticon anticon-delete"
+                tabindex="-1"
+                title="Remove file"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                  />
+                </svg>
+              </i>
+            </a>
+          </span>
         </span>
       </div>
-      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-        tabindex="-1"
-        title="Remove file"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
     </div>
   </div>
 </span>
@@ -324,7 +431,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
       class="ant-upload-list ant-upload-list-picture-card"
     >
       <div
-        class="ant-upload-list-item ant-upload-list-item-done"
+        class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
@@ -343,7 +450,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               />
             </a>
             <a
-              class="ant-upload-list-item-name"
+              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -382,6 +489,27 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               </svg>
             </i>
           </a>
+          <i
+            aria-label="icon: download"
+            class="anticon anticon-download"
+            tabindex="-1"
+            title="Download file"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="download"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </i>
           <i
             aria-label="icon: delete"
             class="anticon anticon-delete"
@@ -406,7 +534,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
         </span>
       </div>
       <div
-        class="ant-upload-list-item ant-upload-list-item-done"
+        class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
@@ -425,7 +553,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               />
             </a>
             <a
-              class="ant-upload-list-item-name"
+              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -464,6 +592,27 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               </svg>
             </i>
           </a>
+          <i
+            aria-label="icon: download"
+            class="anticon anticon-download"
+            tabindex="-1"
+            title="Download file"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="download"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </i>
           <i
             aria-label="icon: delete"
             class="anticon anticon-delete"
@@ -488,7 +637,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
         </span>
       </div>
       <div
-        class="ant-upload-list-item ant-upload-list-item-done"
+        class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
@@ -507,7 +656,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               />
             </a>
             <a
-              class="ant-upload-list-item-name"
+              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -546,6 +695,27 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               </svg>
             </i>
           </a>
+          <i
+            aria-label="icon: download"
+            class="anticon anticon-download"
+            tabindex="-1"
+            title="Download file"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="download"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </i>
           <i
             aria-label="icon: delete"
             class="anticon anticon-delete"
@@ -570,7 +740,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
         </span>
       </div>
       <div
-        class="ant-upload-list-item ant-upload-list-item-done"
+        class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
@@ -589,7 +759,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               />
             </a>
             <a
-              class="ant-upload-list-item-name"
+              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -628,6 +798,27 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               </svg>
             </i>
           </a>
+          <i
+            aria-label="icon: download"
+            class="anticon anticon-download"
+            tabindex="-1"
+            title="Download file"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="download"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </i>
           <i
             aria-label="icon: delete"
             class="anticon anticon-delete"
@@ -652,7 +843,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
         </span>
       </div>
       <div
-        class="ant-upload-list-item ant-upload-list-item-done"
+        class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
@@ -671,7 +862,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               />
             </a>
             <a
-              class="ant-upload-list-item-name"
+              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -710,6 +901,27 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               </svg>
             </i>
           </a>
+          <i
+            aria-label="icon: download"
+            class="anticon anticon-download"
+            tabindex="-1"
+            title="Download file"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="download"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </i>
           <i
             aria-label="icon: delete"
             class="anticon anticon-delete"
@@ -753,7 +965,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
       class="ant-upload-list ant-upload-list-picture"
     >
       <div
-        class="ant-upload-list-item ant-upload-list-item-done"
+        class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
@@ -772,7 +984,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
               />
             </a>
             <a
-              class="ant-upload-list-item-name"
+              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -780,32 +992,65 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
             >
               xxx.png
             </a>
+            <span
+              class="ant-upload-list-item-card-actions picture"
+            >
+              <a
+                title="Download file"
+              >
+                <i
+                  aria-label="icon: download"
+                  class="anticon anticon-download"
+                  tabindex="-1"
+                  title="Download file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="download"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </i>
+              </a>
+              <a
+                title="Remove file"
+              >
+                <i
+                  aria-label="icon: delete"
+                  class="anticon anticon-delete"
+                  tabindex="-1"
+                  title="Remove file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="delete"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                    />
+                  </svg>
+                </i>
+              </a>
+            </span>
           </span>
         </div>
-        <i
-          aria-label="icon: close"
-          class="anticon anticon-close"
-          tabindex="-1"
-          title="Remove file"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="close"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-            />
-          </svg>
-        </i>
       </div>
       <div
-        class="ant-upload-list-item ant-upload-list-item-done"
+        class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
@@ -824,7 +1069,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
               />
             </a>
             <a
-              class="ant-upload-list-item-name"
+              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -832,29 +1077,62 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
             >
               yyy.png
             </a>
+            <span
+              class="ant-upload-list-item-card-actions picture"
+            >
+              <a
+                title="Download file"
+              >
+                <i
+                  aria-label="icon: download"
+                  class="anticon anticon-download"
+                  tabindex="-1"
+                  title="Download file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="download"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </i>
+              </a>
+              <a
+                title="Remove file"
+              >
+                <i
+                  aria-label="icon: delete"
+                  class="anticon anticon-delete"
+                  tabindex="-1"
+                  title="Remove file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="delete"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                    />
+                  </svg>
+                </i>
+              </a>
+            </span>
           </span>
         </div>
-        <i
-          aria-label="icon: close"
-          class="anticon anticon-close"
-          tabindex="-1"
-          title="Remove file"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="close"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-            />
-          </svg>
-        </i>
       </div>
     </div>
   </span>
@@ -870,7 +1148,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
       class="ant-upload-list ant-upload-list-picture"
     >
       <div
-        class="ant-upload-list-item ant-upload-list-item-done"
+        class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
@@ -889,7 +1167,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
               />
             </a>
             <a
-              class="ant-upload-list-item-name"
+              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -897,32 +1175,65 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
             >
               xxx.png
             </a>
+            <span
+              class="ant-upload-list-item-card-actions picture"
+            >
+              <a
+                title="Download file"
+              >
+                <i
+                  aria-label="icon: download"
+                  class="anticon anticon-download"
+                  tabindex="-1"
+                  title="Download file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="download"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </i>
+              </a>
+              <a
+                title="Remove file"
+              >
+                <i
+                  aria-label="icon: delete"
+                  class="anticon anticon-delete"
+                  tabindex="-1"
+                  title="Remove file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="delete"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                    />
+                  </svg>
+                </i>
+              </a>
+            </span>
           </span>
         </div>
-        <i
-          aria-label="icon: close"
-          class="anticon anticon-close"
-          tabindex="-1"
-          title="Remove file"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="close"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-            />
-          </svg>
-        </i>
       </div>
       <div
-        class="ant-upload-list-item ant-upload-list-item-done"
+        class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
@@ -941,7 +1252,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
               />
             </a>
             <a
-              class="ant-upload-list-item-name"
+              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -949,29 +1260,62 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
             >
               yyy.png
             </a>
+            <span
+              class="ant-upload-list-item-card-actions picture"
+            >
+              <a
+                title="Download file"
+              >
+                <i
+                  aria-label="icon: download"
+                  class="anticon anticon-download"
+                  tabindex="-1"
+                  title="Download file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="download"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </i>
+              </a>
+              <a
+                title="Remove file"
+              >
+                <i
+                  aria-label="icon: delete"
+                  class="anticon anticon-delete"
+                  tabindex="-1"
+                  title="Remove file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="delete"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                    />
+                  </svg>
+                </i>
+              </a>
+            </span>
           </span>
         </div>
-        <i
-          aria-label="icon: close"
-          class="anticon anticon-close"
-          tabindex="-1"
-          title="Remove file"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="close"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-            />
-          </svg>
-        </i>
       </div>
     </div>
   </span>

components/upload/__tests__/upload.test.js

@@ -417,7 +417,7 @@ describe('Upload', () => {
 
     const wrapper = mount(<Upload {...props} />);
 
-    wrapper.find('div.ant-upload-list-item i.anticon-close').simulate('click');
+    wrapper.find('div.ant-upload-list-item i.anticon-delete').simulate('click');
 
     setImmediate(() => {
       wrapper.update();
@@ -429,6 +429,33 @@ describe('Upload', () => {
     });
   });
 
+  it('should not stop download when return use onDownload', done => {
+    const mockRemove = jest.fn(() => false);
+    const props = {
+      onRemove: mockRemove,
+      fileList: [
+        {
+          uid: '-1',
+          name: 'foo.png',
+          status: 'done',
+          url: 'http://www.baidu.com/xxx.png',
+        },
+      ],
+    };
+
+    const wrapper = mount(<Upload {...props} onDownload={() => {}} />);
+
+    wrapper.find('div.ant-upload-list-item i.anticon-download').simulate('click');
+
+    setImmediate(() => {
+      wrapper.update();
+
+      expect(props.fileList).toHaveLength(1);
+      expect(props.fileList[0].status).toBe('done');
+      done();
+    });
+  });
+
   // https://github.com/ant-design/ant-design/issues/14439
   it('should allow call abort function through upload instance', () => {
     const wrapper = mount(

components/upload/__tests__/uploadlist.test.js

@@ -121,7 +121,7 @@ describe('Upload List', () => {
     wrapper
       .find('.ant-upload-list-item')
       .at(0)
-      .find('.anticon-close')
+      .find('.anticon-delete')
       .simulate('click');
     await sleep(400);
     wrapper.update();
@@ -202,6 +202,36 @@ describe('Upload List', () => {
     expect(handleChange.mock.calls[0][0].fileList).toHaveLength(3);
   });
 
+  it('In the case of listType=picture, the error status does not show the download.', () => {
+    const file = { status: 'error', uid: 'file' };
+    const wrapper = mount(
+      <Upload listType="picture" fileList={[file]}>
+        <button type="button">upload</button>
+      </Upload>,
+    );
+    expect(wrapper.find('div.ant-upload-list-item i.anticon-download').length).toBe(0);
+  });
+
+  it('In the case of listType=picture-card, the error status does not show the download.', () => {
+    const file = { status: 'error', uid: 'file' };
+    const wrapper = mount(
+      <Upload listType="picture-card" fileList={[file]}>
+        <button type="button">upload</button>
+      </Upload>,
+    );
+    expect(wrapper.find('div.ant-upload-list-item i.anticon-download').length).toBe(0);
+  });
+
+  it('In the case of listType=text, the error status does not show the download.', () => {
+    const file = { status: 'error', uid: 'file' };
+    const wrapper = mount(
+      <Upload listType="text" fileList={[file]}>
+        <button type="button">upload</button>
+      </Upload>,
+    );
+    expect(wrapper.find('div.ant-upload-list-item i.anticon-download').length).toBe(0);
+  });
+
   it('should support onPreview', () => {
     const handlePreview = jest.fn();
     const wrapper = mount(
@@ -248,6 +278,52 @@ describe('Upload List', () => {
     expect(handleChange.mock.calls.length).toBe(2);
   });
 
+  it('should support onDownload', async () => {
+    const handleDownload = jest.fn();
+    const wrapper = mount(
+      <Upload
+        listType="picture-card"
+        defaultFileList={[
+          {
+            uid: '0',
+            name: 'xxx.png',
+            status: 'done',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          },
+        ]}
+        onDownload={handleDownload}
+      >
+        <button type="button">upload</button>
+      </Upload>,
+    );
+    wrapper
+      .find('.anticon-download')
+      .at(0)
+      .simulate('click');
+  });
+
+  it('should  support no onDownload', async () => {
+    const wrapper = mount(
+      <Upload
+        listType="picture-card"
+        defaultFileList={[
+          {
+            uid: '0',
+            name: 'xxx.png',
+            status: 'done',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          },
+        ]}
+      >
+        <button type="button">upload</button>
+      </Upload>,
+    );
+    wrapper
+      .find('.anticon-download')
+      .at(0)
+      .simulate('click');
+  });
+
   describe('should generate thumbUrl from file', () => {
     [
       { width: 100, height: 200, name: 'height large than width' },
@@ -431,6 +507,13 @@ describe('Upload List', () => {
     expect(wrapper.handlePreview()).toBe(undefined);
   });
 
+  it('return when prop onDownload not exists', () => {
+    const file = new File([''], 'test.txt', { type: 'text/plain' });
+    const items = [{ uid: 'upload-list-item', url: '' }];
+    const wrapper = mount(<UploadList items={items} locale={{ downloadFile: '' }} />).instance();
+    expect(wrapper.handleDownload(file)).toBe(undefined);
+  });
+
   it('previewFile should work correctly', async () => {
     const file = new File([''], 'test.txt', { type: 'text/plain' });
     const items = [{ uid: 'upload-list-item', url: '' }];
@@ -440,6 +523,20 @@ describe('Upload List', () => {
     return wrapper.props.previewFile(file);
   });
 
+  it('downloadFile should work correctly', async () => {
+    const file = new File([''], 'test.txt', { type: 'text/plain' });
+    const items = [{ uid: 'upload-list-item', url: '' }];
+    const wrapper = mount(
+      <UploadList
+        listType="picture-card"
+        items={items}
+        onDownload={() => {}}
+        locale={{ downloadFile: '' }}
+      />,
+    ).instance();
+    return wrapper.props.onDownload(file);
+  });
+
   it('extname should work correctly when url not exists', () => {
     const items = [{ uid: 'upload-list-item', url: '' }];
     const wrapper = mount(
@@ -448,6 +545,21 @@ describe('Upload List', () => {
     expect(wrapper.find('.ant-upload-list-item-thumbnail').length).toBe(2);
   });
 
+  it('extname should work correctly when url exists', () => {
+    const items = [{ status: 'done', uid: 'upload-list-item', url: '/example' }];
+    const wrapper = mount(
+      <UploadList
+        listType="picture"
+        onDownload={file => {
+          expect(file.url).toBe('/example');
+        }}
+        items={items}
+        locale={{ downloadFile: '' }}
+      />,
+    );
+    wrapper.find('div.ant-upload-list-item i.anticon-download').simulate('click');
+  });
+
   it('when picture-card is loading, icon should render correctly', () => {
     const items = [{ status: 'uploading', uid: 'upload-list-item' }];
     const wrapper = mount(

components/upload/index.en-US.md

@@ -32,13 +32,14 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false |  |
 | name | The name of uploading file | string | 'file' |  |
 | previewFile | Customize preview file logic | (file: File \| Blob) => Promise<dataURL: string> | - | 3.17.0 |
-| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon` and `showRemoveIcon` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true |  |
+| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon` and `showDownloadIcon` individually | Boolean or { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean } | true |  |
 | supportServerRender | Need to be turned on while the server side is rendering | boolean | false |  |
 | withCredentials | ajax upload with cookie sent | boolean | false |  |
 | openFileDialogOnClick | click open file dialog | boolean | true | 3.10.0 |
 | onChange | A callback function, can be executed when uploading state is changing, see [onChange](#onChange) | Function | - |  |
 | onPreview | A callback function, will be executed when file link or preview icon is clicked | Function(file) | - |  |
 | onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is `false` or a Promise which resolve(false) or reject | Function(file): `boolean | Promise` | - |  |
+| onDownload | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | Function(file): void | Jump to new TAB |  |
 | transformFile   | Customize transform file before request | Function(file): `string | Blob | File | Promise<string | Blob | File>` | - | 3.21.0 |
 
 ### onChange

components/upload/index.zh-CN.md

@@ -33,13 +33,14 @@ title: Upload
 | multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false |  |
 | name | 发到后台的文件参数名 | string | 'file' |  |
 | previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | 无 | 3.17.0 |
-| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon` 和 `showRemoveIcon` | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true |  |
+| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon` 和 `showDownloadIcon` | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean } | true |  |
 | supportServerRender | 服务端渲染时需要打开这个 | boolean | false |  |
 | withCredentials | 上传请求时是否携带 cookie | boolean | false |  |
 | openFileDialogOnClick | 点击打开文件对话框 | boolean | true | 3.10.0 |
 | onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | Function | 无 |  |
 | onPreview | 点击文件链接或预览图标时的回调 | Function(file) | 无 |  |
 | onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。               | Function(file): `boolean | Promise` | 无   |  |
+| onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。 | Function(file): void | 跳转新标签页 |  |
 | transformFile   | 在上传之前转换文件。支持返回一个 Promise 对象   | Function(file): `string | Blob | File | Promise<string | Blob | File>` | 无   | 3.21.0 |
 
 ### onChange

components/upload/interface.tsx

@@ -40,11 +40,13 @@ export interface UploadChangeParam<T extends object = UploadFile> {
 export interface ShowUploadListInterface {
   showRemoveIcon?: boolean;
   showPreviewIcon?: boolean;
+  showDownloadIcon?: boolean;
 }
 
 export interface UploadLocale {
   uploading?: string;
   removeFile?: string;
+  downloadFile?: string;
   uploadError?: string;
   previewFile?: string;
 }
@@ -74,6 +76,7 @@ export interface UploadProps {
   listType?: UploadListType;
   className?: string;
   onPreview?: (file: UploadFile) => void;
+  onDownload?: (file: UploadFile) => void;
   onRemove?: (file: UploadFile) => void | boolean | Promise<void | boolean>;
   supportServerRender?: boolean;
   style?: React.CSSProperties;
@@ -96,11 +99,13 @@ export interface UploadState {
 export interface UploadListProps {
   listType?: UploadListType;
   onPreview?: (file: UploadFile) => void;
+  onDownload?: (file: UploadFile) => void;
   onRemove?: (file: UploadFile) => void | boolean;
   items?: Array<UploadFile>;
   progressAttr?: Object;
   prefixCls?: string;
   showRemoveIcon?: boolean;
+  showDownloadIcon?: boolean;
   showPreviewIcon?: boolean;
   locale: UploadLocale;
   previewFile?: PreviewFileHandler;

components/upload/style/index.less

@@ -140,6 +140,16 @@
 .@{upload-prefix-cls}-list {
   .reset-component;
   .clearfix;
+  &-item-list-type-text {
+    &:hover {
+      .@{upload-prefix-cls}-list-item-name-icon-count-1 {
+        padding-right: 14px;
+      }
+      .@{upload-prefix-cls}-list-item-name-icon-count-2 {
+        padding-right: 28px;
+      }
+    }
+  }
   &-item {
     position: relative;
     height: 22px;
@@ -154,6 +164,25 @@
       text-overflow: ellipsis;
     }
 
+    &-name-icon-count-1 {
+      padding-right: 14px;
+    }
+
+    &-card-actions {
+      position: absolute;
+      right: 0;
+      opacity: 0;
+      &.picture {
+        top: 25px;
+        line-height: 1;
+        opacity: 1;
+      }
+      .anticon {
+        padding-right: 5px;
+        color: rgba(0, 0, 0, 0.45);
+      }
+    }
+
     &-info {
       height: 100%;
       padding: 0 12px 0 4px;
@@ -196,14 +225,21 @@
       opacity: 1;
     }
 
+    &:hover &-card-actions {
+      opacity: 1;
+    }
+
     &-error,
     &-error .@{iconfont-css-prefix}-paper-clip,
     &-error &-name {
       color: @error-color;
     }
 
-    &-error .@{iconfont-css-prefix}-close {
-      color: @error-color !important;
+    &-error &-card-actions {
+      .anticon {
+        padding-right: 5px;
+        color: @error-color;
+      }
       opacity: 1;
     }
 
@@ -290,6 +326,14 @@
       transition: all 0.3s;
     }
 
+    .@{upload-item}-name-icon-count-1 {
+      padding-right: 18px;
+    }
+
+    .@{upload-item}-name-icon-count-2 {
+      padding-right: 36px;
+    }
+
     .@{upload-item}-uploading .@{upload-item}-name {
       line-height: 28px;
     }
@@ -353,6 +397,7 @@
       transition: all 0.3s;
 
       .@{iconfont-css-prefix}-eye-o,
+      .@{iconfont-css-prefix}-download,
       .@{iconfont-css-prefix}-delete {
         z-index: 10;
         width: 16px;