feat: Support non-click folder upload

[linhf123]

支持拖拽、粘贴文件夹，点击时为非 directory 模式

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
upload	Ready	Preview	Comment	Sep 20, 2025 0:34am

[gemini-code-assist]

Summary of Changes

Hello @linhf123, 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!

此拉取请求旨在增强文件上传组件的功能，通过引入一种新的模式，允许用户仅通过拖拽或粘贴操作来上传整个文件夹，同时阻止通过点击触发的文件选择器选择文件夹。这为开发者提供了更灵活的控制，以适应不同的用户交互需求，特别是在需要区分文件和文件夹上传行为的场景中。

Highlights

• 新增文件夹上传模式: 引入了 directory 属性的新值 'nonClick'，允许通过拖拽或粘贴方式上传文件夹，但禁用点击选择文件夹的功能。
• 更新类型定义和文档: 在 src/interface.tsx 中更新了 directory 属性的类型定义，使其支持 'nonClick'，并在 README.md 中更新了相关文档说明。
• 修改上传逻辑: 调整了 src/AjaxUploader.tsx 中处理 directory 属性的逻辑，以正确区分传统的点击式文件夹上传和新的 'nonClick' 模式。
• 新增示例和文档: 添加了 docs/examples/dragOnlyDirectory.tsx 示例文件和 docs/demo/dragOnlyDirectory.md 文档，演示如何使用新的拖拽上传文件夹功能。

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

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. ↩

[gemini-code-assist]

Code Review

你好，感谢你的贡献。这个 PR 增加了对非点击文件夹上传的支持，通过为 directory prop 添加 'nonClick' 选项实现。

整体实现思路是正确的。但我在代码中发现了一些相关的问题，并提出了一些改进建议：

1. 在 AjaxUploader.tsx 中，有几个地方只处理了 directory prop 而忽略了 folder prop，这会导致使用 folder 时功能异常。这是一个需要修复的 bug。
2. 在 src/interface.tsx 中，新功能被添加到了一个已弃用的 directory prop 上。为了 API 的清晰和一致性，建议将此功能也应用到 folder prop 上。

我已在具体的代码文件中留下了详细的审查意见和修改建议。请查看。

[gemini-code-assist]

你好，此处的修改正确处理了 directory 为 'nonClick' 时的情况，避免了点击时触发目录选择。

然而，我注意到组件中的其他地方未能正确地同时处理 directory 和 folder 这两个 prop，这会导致使用 folder prop 时出现 bug。既然你正在修改相关的逻辑，建议在此 PR 中一并修复：

1. onDataTransferFiles 方法 (L70, L79):
   此方法用于处理拖拽上传。目前它只解构并检查了 directory prop，忽略了 folder。这导致当使用 folder={true} 时，拖拽上传文件夹的功能会失效。

   • 应修改为：const { multiple, accept, directory, folder } = this.props;
   • 以及 if (directory || folder)

2. onChange 方法 (L34, L37):
   此方法在通过文件对话框选择文件/文件夹后触发。它同样只检查了 directory prop 来决定是否要对文件进行 accept 过滤。当使用 folder={true} 时，文件过滤将不会按预期工作。

   • 应修改为：const { accept, directory, folder } = this.props;
   • 以及 (file: RcFile) => !(directory || folder) || attrAccept(file, accept)

修复这些问题可以确保在使用推荐的 folder prop 时，组件功能正常。

[gemini-code-assist]

你好，将 'nonClick' 添加到 directory 类型是正确的。

不过，directory prop 已经被标记为 @deprecated，并建议使用 folder。为了保持一致性和避免未来混淆，是否考虑也将 'nonClick' 选项添加到 folder prop 中？

例如:

folder?: boolean | 'nonClick';

这样，用户就可以通过推荐的 folder prop 来使用这个新功能，例如 folder="nonClick"。这会让 API 更加清晰。

[linhf123]

ref #522

[linhf123]

点击选择走 directory 逻辑, 单选多选都可以正常运行

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.03%. Comparing base (4958954) to head (1606796).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #659   +/-   ##
=======================================
  Coverage   89.03%   89.03%           
=======================================
  Files           6        6           
  Lines         301      301           
  Branches       82       82           
=======================================
  Hits          268      268           
  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.

[linhf123]

@zombieJ 帮忙看看

[yoyo837]

directory 已经标注废弃，改用 folder，所以你两个都得判断

[linhf123]

folder 不会走以下逻辑（在拖拽、复制时对文件夹内容进行读取并拍平），原 PR 看着只是开启原生文件夹选择
#643

upload/src/AjaxUploader.tsx

Lines 69 to 93 in 4958954

	onDataTransferFiles = async (dataTransfer: DataTransfer, existFileCallback?: () => void) => {
	const { multiple, accept, directory } = this.props;
	const items: DataTransferItem[] = [...(dataTransfer.items || [])];
	let files: File[] = [...(dataTransfer.files || [])];
	if (files.length > 0 || items.some(item => item.kind === 'file')) {
	existFileCallback?.();
	}
	if (directory) {
	files = await traverseFileTree(Array.prototype.slice.call(items), (_file: RcFile) =>
	attrAccept(_file, this.props.accept),
	);
	this.uploadFiles(files);
	} else {
	let acceptFiles = [...files].filter((file: RcFile) => attrAccept(file, accept));
	if (multiple === false) {
	acceptFiles = files.slice(0, 1);
	}
	this.uploadFiles(acceptFiles);
	}
	};

拖拽场景下只能获取到文件夹对象（需要用户手动处理），不能获取内部文件

[zombieJ]

拖拽场景下只能获取到文件夹对象（需要用户手动处理），不能获取内部文件

手动处理指的是怎么处理？

[linhf123]

需要用户自己实现 onDataTransferFiles 中的实现，才可以获取文件夹下的文件

[linhf123]

所以 folder 预期拖拽也需要直接返回文件夹中的子文件吗？