chore: dir native support

Author: zombieJ

src/AjaxUploader.tsx

@@ -30,11 +30,15 @@ class AjaxUploader extends Component<UploadProps> {
 
   private _isMounted: boolean;
 
+  private isNativeDirectory = (): boolean => {
+    return this.props.directory === 'native';
+  };
+
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { accept, directory } = this.props;
+    const { accept } = this.props;
     const { files } = e.target;
     const acceptedFiles = [...files].filter(
-      (file: RcFile) => !directory || attrAccept(file, accept),
+      (file: RcFile) => this.isNativeDirectory() || attrAccept(file, accept),
     );
     this.uploadFiles(acceptedFiles);
     this.reset();
@@ -78,7 +82,7 @@ class AjaxUploader extends Component<UploadProps> {
 
     if (directory) {
       files = await traverseFileTree(Array.prototype.slice.call(items), (_file: RcFile) =>
-        attrAccept(_file, this.props.accept),
+        this.isNativeDirectory() ? true : attrAccept(_file, this.props.accept),
       );
       this.uploadFiles(files);
     } else {
@@ -322,7 +326,6 @@ class AjaxUploader extends Component<UploadProps> {
       capture,
       children,
       directory,
-      folder,
       openFileDialogOnClick,
       onMouseEnter,
       onMouseLeave,
@@ -331,8 +334,9 @@ class AjaxUploader extends Component<UploadProps> {
     } = this.props;
     const cls = clsx(prefixCls, { [`${prefixCls}-disabled`]: disabled, [className]: className });
     // because input don't have directory/webkitdirectory type declaration
-    const dirProps: any =
-      directory || folder ? { directory: 'directory', webkitdirectory: 'webkitdirectory' } : {};
+    const dirProps: any = directory
+      ? { directory: 'directory', webkitdirectory: 'webkitdirectory' }
+      : {};
     const events = disabled
       ? {}
       : {

src/interface.tsx

@@ -13,9 +13,12 @@ export interface UploadProps
   component?: React.ComponentType<any> | string;
   action?: Action;
   method?: UploadRequestMethod;
-  /** @deprecated Please use `folder` instead */
-  directory?: boolean;
-  folder?: boolean;
+  /**
+   * Whether to support directory upload.
+   * By default, files within the directory will be filtered through the accept attribute.
+   * When set to `native`, it will upload the directory directly following native logic without filtering.
+   */
+  directory?: boolean | 'native';
   data?: Record<string, unknown> | ((file: RcFile | string | Blob) => Record<string, unknown>);
   headers?: UploadRequestHeader;
   accept?: string;

tests/uploader.spec.tsx

@@ -1039,9 +1039,9 @@ describe('uploader', () => {
       },
     );
 
-    it('should trigger beforeUpload when uploading non-accepted files in folder mode', () => {
+    it('should trigger beforeUpload when uploading non-accepted files in native directory mode', () => {
       const beforeUpload = jest.fn();
-      const { container } = render(<Upload accept=".png" folder beforeUpload={beforeUpload} />);
+      const { container } = render(<Upload accept=".png" directory="native" beforeUpload={beforeUpload} />);
 
       fireEvent.change(container.querySelector('input')!, {
         target: {
@@ -1050,6 +1050,47 @@ describe('uploader', () => {
       });
       expect(beforeUpload).toHaveBeenCalledTimes(2);
     });
+
+    it('should filter files by accept when directory is true', async () => {
+      const onStart = jest.fn();
+      const { container } = render(<Upload action="/test" accept=".png" directory={true} onStart={onStart} />);
+
+      // Wait for component to be ready
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      fireEvent.change(container.querySelector('input')!, {
+        target: {
+          files: [new File([''], 'bamboo.png'), new File([''], 'light.jpg')],
+        },
+      });
+
+      // Wait for async operations
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      // Only .png file should be uploaded when directory={true}
+      expect(onStart).toHaveBeenCalledTimes(1);
+      expect(onStart).toHaveBeenCalledWith(expect.objectContaining({ name: 'bamboo.png' }));
+    });
+
+    it('should not filter files by accept when directory is "native"', async () => {
+      const onStart = jest.fn();
+      const { container } = render(<Upload action="/test" accept=".png" directory="native" onStart={onStart} />);
+
+      // Wait for component to be ready
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      fireEvent.change(container.querySelector('input')!, {
+        target: {
+          files: [new File([''], 'bamboo.png'), new File([''], 'light.jpg')],
+        },
+      });
+
+      // Wait for async operations
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      // Both files should be uploaded when directory="native"
+      expect(onStart).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe('transform file before request', () => {