feat: upload support rootClassName

components/upload/Upload.tsx

@@ -62,6 +62,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     action = '',
     accept = '',
     supportServerRender = true,
+    rootClassName,
   } = props;
 
   // ===================== Disabled =====================
@@ -405,11 +406,18 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     );
   };
 
-  const wrapperCls = classNames(`${prefixCls}-wrapper`, className, hashId, ctxUpload?.className, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-    [`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card',
-    [`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle',
-  });
+  const wrapperCls = classNames(
+    `${prefixCls}-wrapper`,
+    className,
+    rootClassName,
+    hashId,
+    ctxUpload?.className,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+      [`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card',
+      [`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle',
+    },
+  );
 
   const mergedStyle: React.CSSProperties = { ...ctxUpload?.style, ...style };
 

components/upload/__tests__/__snapshots__/upload.test.tsx.snap

@@ -25,3 +25,35 @@ exports[`Upload rtl render component should be rendered correctly in RTL directi
   />
 </span>
 `;
+
+exports[`Upload should support rootClassName 1`] = `
+<div>
+  <span
+    class="ant-upload-wrapper custom-class-name"
+  >
+    <div
+      class="ant-upload ant-upload-select"
+    >
+      <span
+        class="ant-upload"
+        role="button"
+        tabindex="0"
+      >
+        <input
+          accept=""
+          style="display: none;"
+          type="file"
+        />
+        <button
+          type="button"
+        >
+          upload
+        </button>
+      </span>
+    </div>
+    <div
+      class="ant-upload-list ant-upload-list-text"
+    />
+  </span>
+</div>
+`;

components/upload/__tests__/upload.test.tsx

@@ -1034,4 +1034,15 @@ describe('Upload', () => {
       expect(file.status).toBe('done');
     });
   });
+
+  it('should support rootClassName', () => {
+    const { container } = render(
+      <Upload rootClassName="custom-class-name">
+        <button type="button">upload</button>
+      </Upload>,
+    );
+
+    expect(container.querySelector('.custom-class-name')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
 });

components/upload/index.en-US.md

@@ -47,6 +47,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| rootClassName | ClassName on the root element | string | - | 5.9.0 |
 | accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
 | action | Uploading URL | string \| (file) => Promise<string> | - |  |
 | beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. When returned value is `Upload.LIST_IGNORE`, the list of files that have been uploaded will ignore it. **Warning：this function is not supported in IE9** | (file, fileList) => boolean \| Promise<File> \| `Upload.LIST_IGNORE` | - |  |

components/upload/index.zh-CN.md

@@ -48,6 +48,7 @@ demo:
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| rootClassName | 添加在组件最外层的 className | string | - | 5.9.0 |
 | accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
 | action | 上传的地址 | string \| (file) => Promise<string> | - |  |
 | beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）；也可以返回 `Upload.LIST_IGNORE`，此时列表中将不展示此文件。 **注意：IE9 不支持该方法** | (file, fileList) => boolean \| Promise<File> \| `Upload.LIST_IGNORE` | - |  |

components/upload/interface.ts

@@ -109,6 +109,7 @@ export interface UploadProps<T = any> extends Pick<RcUploadProps, 'capture'> {
   onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
   listType?: UploadListType;
   className?: string;
+  rootClassName?: string;
   onPreview?: (file: UploadFile<T>) => void;
   onDownload?: (file: UploadFile<T>) => void;
   onRemove?: (file: UploadFile<T>) => void | boolean | Promise<void | boolean>;