feat: resolve #24213 customize progress bar in upload

components/upload/Upload.tsx

@@ -242,6 +242,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
       locale: propLocale,
       iconRender,
       isImageUrl,
+      progress,
     } = this.props;
     const {
       showRemoveIcon,
@@ -267,6 +268,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
         iconRender={iconRender}
         locale={{ ...locale, ...propLocale }}
         isImageUrl={isImageUrl}
+        progress={progress}
       />
     );
   };

components/upload/UploadList.tsx

@@ -19,7 +19,7 @@ import { cloneElement, isValidElement } from '../_util/reactNode';
 export default class UploadList extends React.Component<UploadListProps, any> {
   static defaultProps = {
     listType: 'text' as UploadListType, // or picture
-    progressAttr: {
+    progress: {
       strokeWidth: 2,
       showInfo: false,
     },
@@ -129,7 +129,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
       removeIcon: customRemoveIcon,
       downloadIcon: customDownloadIcon,
       locale,
-      progressAttr,
+      progress: progressProps,
       isImageUrl: isImgUrl,
     } = this.props;
     const prefixCls = getPrefixCls('upload', customizePrefixCls);
@@ -177,7 +177,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
         // show loading icon if upload progress listener is disabled
         const loadingProgress =
           'percent' in file ? (
-            <Progress type="line" {...progressAttr} percent={file.percent} />
+            <Progress type="line" {...progressProps} percent={file.percent} />
           ) : null;
 
         progress = (

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

@@ -223,6 +223,59 @@ exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
 </span>
 `;
 
+exports[`renders ./components/upload/demo/customize-progress-bar.md correctly 1`] = `
+<span
+  class=""
+>
+  <div
+    class="ant-upload ant-upload-select ant-upload-select-text"
+  >
+    <span
+      class="ant-upload"
+      role="button"
+      tabindex="0"
+    >
+      <input
+        accept=""
+        style="display:none"
+        type="file"
+      />
+      <button
+        class="ant-btn"
+        type="button"
+      >
+        <span
+          aria-label="upload"
+          class="anticon anticon-upload"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="upload"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 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>
+        </span>
+        <span>
+           Click to Upload
+        </span>
+      </button>
+    </span>
+  </div>
+  <div
+    class="ant-upload-list ant-upload-list-text"
+  />
+</span>
+`;
+
 exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
 <span
   class=""

components/upload/demo/customize-progress-bar.md

@@ -0,0 +1,54 @@
+---
+order: 999
+title:
+  zh-CN: Customize Progress Bar
+  en-US: Customize Progress Bar
+debug: true
+---
+
+## zh-CN
+
+Customize Progress Bar with `progress` props.
+
+## en-US
+
+Customize Progress Bar with `progress` props.
+
+```jsx
+import { Upload, message, Button } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+
+const props = {
+  name: 'file',
+  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+  headers: {
+    authorization: 'authorization-text',
+  },
+  onChange(info) {
+    if (info.file.status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (info.file.status === 'done') {
+      message.success(`${info.file.name} file uploaded successfully`);
+    } else if (info.file.status === 'error') {
+      message.error(`${info.file.name} file upload failed.`);
+    }
+  },
+  progress: {
+    strokeColor: {
+      '0%': '#108ee9',
+      '100%': '#87d068',
+    },
+    strokeWidth: 3,
+  },
+};
+
+ReactDOM.render(
+  <Upload {...props}>
+    <Button>
+      <UploadOutlined /> Click to Upload
+    </Button>
+  </Upload>,
+  mountNode,
+);
+```

components/upload/index.en-US.md

@@ -43,6 +43,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | 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>` | - |  |
 | iconRender | custom show icon | (file: UploadFile, listType?: UploadListType) => React.ReactNode | - |  |
+| progress | custom progress bar | [progress props](/components/progress/) | `{ strokeWidth: 2, showInfo: false }` |  |
 
 ### onChange
 

components/upload/index.zh-CN.md

@@ -44,6 +44,7 @@ title: Upload
 | onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。 | Function(file): void | 跳转新标签页 |  |
 | transformFile   | 在上传之前转换文件。支持返回一个 Promise 对象   | Function(file): `string | Blob | File | Promise<string | Blob | File>` | 无   |  |
 | iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => React.ReactNode | 无 |  |
+| progress | 自定义进度条样式 | [progress props](/components/progress/) | `{ strokeWidth: 2, showInfo: false }` |  |
 
 ### onChange
 

components/upload/interface.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ProgressProps } from '../progress';
 
 export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
 
@@ -67,6 +68,7 @@ export interface UploadLocale {
 
 export type UploadType = 'drag' | 'select';
 export type UploadListType = 'text' | 'picture' | 'picture-card';
+export type UploadListProgressProps = Omit<ProgressProps, 'percent' | 'type'>;
 
 type PreviewFileHandler = (file: File | Blob) => PromiseLike<string>;
 type TransformFileHandler = (
@@ -106,6 +108,7 @@ export interface UploadProps<T = any> {
   transformFile?: TransformFileHandler;
   iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
   isImageUrl?: (file: UploadFile) => boolean;
+  progress?: UploadListProgressProps;
 }
 
 export interface UploadState<T = any> {
@@ -119,7 +122,7 @@ export interface UploadListProps<T = any> {
   onDownload?: (file: UploadFile<T>) => void;
   onRemove?: (file: UploadFile<T>) => void | boolean;
   items?: Array<UploadFile<T>>;
-  progressAttr?: Object;
+  progress?: UploadListProgressProps;
   prefixCls?: string;
   showRemoveIcon?: boolean;
   showDownloadIcon?: boolean;