Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork 324
feat: Support non-click folder upload#659
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base:master
Are you sure you want to change the base?
Uh oh!
There was an error while loading. Please reload this page.
Changes from all commits
File filter
Filter by extension
Conversations
Uh oh!
There was an error while loading. Please reload this page.
Jump to
Uh oh!
There was an error while loading. Please reload this page.
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| --- | ||
| title: dragOnlyDirectory | ||
| nav: | ||
| title: Demo | ||
| path: /demo | ||
| --- | ||
| <code src="../examples/dragOnlyDirectory.tsx"></code> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| /* eslint no-console:0 */ | ||
| import React from 'react'; | ||
| import Upload from 'rc-upload'; | ||
| const props = { | ||
| action: '/upload.do', | ||
| type: 'drag', | ||
| directory: 'nonClick' as 'nonClick', | ||
| beforeUpload(file, fileList) { | ||
| console.log('beforeUpload', file.name, fileList); | ||
| }, | ||
| onStart: file => { | ||
| console.log('onStart', file.name); | ||
| }, | ||
| onSuccess(file) { | ||
| console.log('onSuccess', file); | ||
| }, | ||
| onProgress(step, file) { | ||
| console.log('onProgress', Math.round(step.percent), file.name); | ||
| }, | ||
| onError(err) { | ||
| console.log('onError', err); | ||
| }, | ||
| style: { display: 'inline-block', width: 200, height: 200, background: '#eee' }, | ||
| // openFileDialogOnClick: false | ||
| }; | ||
| const Test = () => { | ||
| return ( | ||
| <div | ||
| style={{ | ||
| margin: 100, | ||
| }} | ||
| > | ||
| <div> | ||
| <Upload {...props}> | ||
| <a>开始上传,只支持拖拽上传文件夹</a> | ||
| </Upload> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default Test; |
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -335,7 +335,7 @@ class AjaxUploader extends Component<UploadProps> { | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| }); | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| // because input don't have directory/webkitdirectory type declaration | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| const dirProps: any = | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| directory || folder ? { directory: 'directory', webkitdirectory: 'webkitdirectory' } : {}; | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| directory === true || folder ? { directory: 'directory', webkitdirectory: 'webkitdirectory' } : {}; | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Member There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. directory 已经标注废弃,改用 folder,所以你两个都得判断
| ||||||||||||||||||||||||||||||||||||||||||||||||||||
| onDataTransferFiles=async(dataTransfer: DataTransfer,existFileCallback?: ()=>void)=>{ | |
| const{ multiple, accept, directory }=this.props; | |
| constitems: DataTransferItem[]=[...(dataTransfer.items||[])]; | |
| letfiles: File[]=[...(dataTransfer.files||[])]; | |
| if(files.length>0||items.some(item=>item.kind==='file')){ | |
| existFileCallback?.(); | |
| } | |
| if(directory){ | |
| files=awaittraverseFileTree(Array.prototype.slice.call(items),(_file: RcFile)=> | |
| attrAccept(_file,this.props.accept), | |
| ); | |
| this.uploadFiles(files); | |
| }else{ | |
| letacceptFiles=[...files].filter((file: RcFile)=>attrAccept(file,accept)); | |
| if(multiple===false){ | |
| acceptFiles=files.slice(0,1); | |
| } | |
| this.uploadFiles(acceptFiles); | |
| } | |
| }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
拖拽场景下只能获取到文件夹对象(需要用户手动处理),不能获取内部文件
手动处理指的是怎么处理?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
需要用户自己实现 onDataTransferFiles 中的实现,才可以获取文件夹下的文件
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
所以 folder 预期拖拽也需要直接返回文件夹中的子文件吗?
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -14,7 +14,7 @@ export interface UploadProps | ||
| action?: Action; | ||
| method?: UploadRequestMethod; | ||
| /** @deprecated Please use `folder` instead */ | ||
| directory?: boolean; | ||
| directory?: boolean | 'nonClick'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. | ||
| folder?: boolean; | ||
| data?: Record<string, unknown> | ((file: RcFile | string | Blob) => Record<string, unknown>); | ||
| headers?: UploadRequestHeader; | ||

There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
你好,此处的修改正确处理了
directory为'nonClick'时的情况,避免了点击时触发目录选择。然而,我注意到组件中的其他地方未能正确地同时处理
directory和folder这两个 prop,这会导致使用folderprop 时出现 bug。既然你正在修改相关的逻辑,建议在此 PR 中一并修复:onDataTransferFiles方法 (L70, L79):此方法用于处理拖拽上传。目前它只解构并检查了
directoryprop,忽略了folder。这导致当使用folder={true}时,拖拽上传文件夹的功能会失效。const { multiple, accept, directory, folder } = this.props;if (directory || folder)onChange方法 (L34, L37):此方法在通过文件对话框选择文件/文件夹后触发。它同样只检查了
directoryprop 来决定是否要对文件进行accept过滤。当使用folder={true}时,文件过滤将不会按预期工作。const { accept, directory, folder } = this.props;(file: RcFile) => !(directory || folder) || attrAccept(file, accept)修复这些问题可以确保在使用推荐的
folderprop 时,组件功能正常。