chore: Use directory=native instead of folder

[zombieJ]

Summary by CodeRabbit

• 新功能

  • 支持更灵活的 accept 配置：可使用格式字符串或包含格式与过滤策略的对象（支持原生或自定义过滤）。

• 改进

  • 统一了文件接受判断逻辑，目录与非目录上传均按合并后的过滤规则处理；input 的 accept 属性计算更精确。
  • 移除已弃用的 folder 属性，directory 保持控制目录行为。

• 测试

  • 扩展并更新用例，覆盖多种 accept 配置与目录上传场景。

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
upload	Ready	Preview	Comment	Oct 30, 2025 10:19am

[gemini-code-assist]

Summary of Changes

Hello @zombieJ, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refines the file upload component's directory handling by introducing more granular control over how files are processed during directory uploads. It allows users to choose between filtering files based on accepted types or directly uploading all files within a selected directory, aligning with native browser behavior. This change also streamlines the API by deprecating a redundant prop and includes a minor bug fix for single file uploads.

Highlights

• Enhanced Directory Upload Control: The directory prop now accepts a 'native' string value, which allows for direct directory uploads without filtering files based on the accept attribute. When directory is true, files within the directory will still be filtered by the accept attribute.
• Deprecation of folder Prop: The redundant folder prop has been removed, consolidating all directory upload functionality under the directory prop for a cleaner API.
• Bug Fix for Single File Upload: A minor bug was resolved where, in non-directory mode with multiple={false}, the component might not correctly limit the upload to a single accepted file.
• Improved Test Coverage: New test cases have been added to thoroughly validate the distinct behaviors of directory={true} (with filtering) and directory='native' (without filtering), ensuring robust functionality.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

将文件接收逻辑集中为私有 helper filterFile（支持字符串 accept 与新 AcceptConfig），在各路径使用该逻辑判断文件是否接受；移除对遗留 folder 渲染分支；调整 input 的 accept 为格式化后的 acceptFormat；扩展并重写相关测试覆盖不同 accept 配置。

Changes

变更组群 / 文件(s)	变更摘要
AjaxUploader 核心 src/AjaxUploader.tsx	新增私有 filterFile，引入 mergedFilter 行为：优先使用用户提供的 filterFn，否则按 attribute accept 或全量通过（支持 object 型 AcceptConfig 与 native 过滤选项）；将 onChange/onDataTransferFiles 中对单文件和目录的过滤改为通过 filterFile；移除对旧 folder 渲染分支，dirProps 仅基于 directory 设置；将 accept 属性替换为 acceptFormat。
接口类型 src/interface.tsx	新增导出类型 AcceptConfig（{ format: string; filter?: 'native'
测试 tests/uploader.spec.tsx	重构/新增测试以覆盖 AcceptConfig 行为：包括 format-only、native filter、自定义函数、及 MIME 型式的组合场景；引入 testAcceptConfig 辅助并验证 onStart 调用计数，适配目录相关行为变化。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant AjaxUploader
    participant Filter as filterFile
    participant Traverser as traverseFileTree

    Note over User,AjaxUploader: 文件/目录选择或粘贴事件触发
    User->>AjaxUploader: 提交 FileList / DataTransfer
    AjaxUploader->>Traverser: (若目录) 遍历目录结构以收集文件
    Traverser-->>AjaxUploader: 返回文件列表
    AjaxUploader->>Filter: 对每个文件调用 filterFile(file, isDataTransfer?)
    alt filter 返回 true
        Filter-->>AjaxUploader: 接受该文件
    else filter 返回 false
        Filter-->>AjaxUploader: 拒绝该文件
    end
    AjaxUploader->>User: 仅对被接受的文件触发上传(onStart/onChange)

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 分钟

• 需重点审查：
  • filterFile 的实现细节与 AcceptConfig.filter 的互斥/优先级（'native' 与自定义函数的交互）。
  • onChange、onDataTransferFiles、目录遍历路径中统一使用 filterFile 时的边界情况（目录内文件是否应被跳过/通过）。
  • acceptFormat 与原 accept 的语义转换（尤其是复杂 accept 字符串与 AcceptConfig.format 的一致性）。
  • 测试覆盖的代表性与时序断言（onStart 调用次数）是否充分反映变更。

Possibly related PRs

• fix: Upload drag & drop not working #625：与本 PR 在 AjaxUploader.tsx 中对目录遍历与数据传输处理（onDataTransferFiles/onChange）有直接代码层面关联。
• feat: support folder and deprecated directory #643：修改了 directory/folder 相关处理与 UploadProps 定义，可能与本次移除 folder 的改动重叠或冲突。

诗歌

🐰 我是小兔来报告，
接受规则成一册，
字符串、对象都能识，
原生模式绕过筛选阙；
文件跳跃，测试欢跃。

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	标题"chore: Use directory=native instead of folder"部分相关于 changeset 的主要变化。根据 src/interface.tsx 的改动，确实移除了公共属性 folder?: boolean，并保留了 directory?: boolean，这与标题中"从 folder 迁移到 directory"的表述相符。然而，标题未能涵盖此 PR 的核心重构工作，主要包括：新增 AcceptConfig 类型以支持更灵活的文件过滤、在 AjaxUploader.tsx 中引入 filterFile 辅助函数来集中文件接受逻辑，以及更新了 accept 属性从 string 类型到 string | AcceptConfig 类型。标题只传达了 prop 迁移的一个方面，而不是整体重构的重点。

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dir-native

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 29c95a6 and f3ccf21.

📒 Files selected for processing (3)

• src/AjaxUploader.tsx (6 hunks)
• src/interface.tsx (1 hunks)
• tests/uploader.spec.tsx (2 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-04-09T06:22:00.335Z

Learnt from: zombieJ
Repo: react-component/upload PR: 543
File: src/AjaxUploader.tsx:116-116
Timestamp: 2025-04-09T06:22:00.335Z
Learning: 在 react-component/upload 项目中，黏贴上传功能应该是可配置的，只有当启用此功能时才应添加 paste 事件监听器，而不是无条件添加。同时，事件监听器绑定应使用预先绑定的方法而非直接使用 .bind(this) 以避免内存泄漏。

Applied to files:

• src/AjaxUploader.tsx

🧬 Code graph analysis (3)

src/AjaxUploader.tsx (2)

src/attr-accept.ts (1)

• file (4-53)

src/interface.tsx (2)

• RcFile (88-90)
• AcceptConfig (7-10)

tests/uploader.spec.tsx (4)

src/AjaxUploader.tsx (1)

• render (332-399)

src/Upload.tsx (1)

• render (37-39)

src/interface.tsx (1)

• UploadProps (12-53)

src/attr-accept.ts (1)

• file (4-53)

src/interface.tsx (1)

src/attr-accept.ts (1)

• file (4-53)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.58%. Comparing base (1896e01) to head (f3ccf21).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #681      +/-   ##
==========================================
+ Coverage   89.03%   89.58%   +0.55%     
==========================================
  Files           6        6              
  Lines         301      317      +16     
  Branches       80       90      +10     
==========================================
+ Hits          268      284      +16     
  Misses         33       33              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gemini-code-assist]

Code Review

This pull request refactors the directory upload functionality by replacing the deprecated folder prop with an enhanced directory prop, which now accepts a 'native' value to bypass file type filtering. This is a clean implementation that improves the component's flexibility. The changes also include corresponding updates to the interface and new tests to cover the added functionality. Additionally, the PR silently fixes a bug where file filtering was not applied correctly for non-directory uploads and another bug related to single file selection. My review includes a suggestion to improve the robustness of the new tests by using waitFor instead of setTimeout.