feat: support classNames and styles

src/AjaxUploader.tsx

@@ -1,7 +1,7 @@
 /* eslint react/no-is-mounted:0,react/sort-comp:0,react/prop-types:0 */
 import type { ReactElement } from 'react';
 import React, { Component } from 'react';
-import classNames from 'classnames';
+import clsx from 'classnames';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import defaultRequest from './request';
 import getUid from './uid';
@@ -264,9 +264,11 @@ class AjaxUploader extends Component<UploadProps> {
       component: Tag,
       prefixCls,
       className,
+      classNames,
       disabled,
       id,
       style,
+      styles,
       multiple,
       accept,
       capture,
@@ -277,11 +279,14 @@ class AjaxUploader extends Component<UploadProps> {
       onMouseLeave,
       ...otherProps
     } = this.props;
-    const cls = classNames({
-      [prefixCls]: true,
-      [`${prefixCls}-disabled`]: disabled,
-      [className]: className,
-    });
+    const cls = clsx(
+      className,
+      prefixCls,
+      {
+        [`${prefixCls}-disabled`]: disabled,
+      },
+      classNames?.wrapper,
+    );
     // because input don't have directory/webkitdirectory type declaration
     const dirProps: any = directory
       ? { directory: 'directory', webkitdirectory: 'webkitdirectory' }
@@ -297,8 +302,14 @@ class AjaxUploader extends Component<UploadProps> {
           onDragOver: this.onFileDrop,
           tabIndex: '0',
         };
+
+    const mergedWrapperStyle: React.CSSProperties = {
+      ...style,
+      ...styles?.wrapper,
+    };
+
     return (
-      <Tag {...events} className={cls} role="button" style={style}>
+      <Tag {...events} className={cls} role="button" style={mergedWrapperStyle}>
         <input
           {...pickAttrs(otherProps, { aria: true, data: true })}
           id={id}
@@ -307,7 +318,8 @@ class AjaxUploader extends Component<UploadProps> {
           ref={this.saveFileInput}
           onClick={e => e.stopPropagation()} // https://github.com/ant-design/ant-design/issues/19948
           key={this.state.uid}
-          style={{ display: 'none' }}
+          style={styles?.input ?? { display: 'none' }}
+          className={classNames?.input}
           accept={accept}
           {...dirProps}
           multiple={multiple}

src/interface.tsx

@@ -37,6 +37,14 @@ export interface UploadProps
   onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
   onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+  classNames?: {
+    wrapper?: string;
+    input?: string;
+  };
+  styles?: {
+    wrapper?: React.CSSProperties;
+    input?: React.CSSProperties;
+  };
 }
 
 export interface UploadProgressEvent extends Partial<ProgressEvent> {

tests/uploader.spec.js

@@ -850,4 +850,24 @@ describe('uploader', () => {
 
     expect(requests[0].url).toEqual('bamboo');
   });
+
+  it('input style defaults to display none', () => {
+    const wrapper = mount(<Uploader />);
+    expect(wrapper.find('input').props().style.display).toBe('none');
+  });
+
+  it('classNames and styles should work', () => {
+    const wrapper = mount(
+      <Uploader
+        classNames={{ wrapper: 'bamboo', input: 'bamboo-input' }}
+        styles={{ wrapper: { height: 100 }, input: { color: 'red' } }}
+      />,
+    );
+    expect(wrapper.find('.bamboo').length).toBeTruthy();
+    expect(wrapper.find('.bamboo-input').length).toBeTruthy();
+
+    expect(wrapper.find('.bamboo').props().style.height).toEqual(100);
+    expect(wrapper.find('.bamboo-input').props().style.color).toEqual('red');
+    expect(wrapper.find('input').props().style.display).not.toBe('none');
+  });
 });