Skip to content
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

Upload beforeUpload 在拖拽上传directory时预期行为不一致 #49252

Closed
mansion-sun opened this issue Jun 5, 2024 · 11 comments · Fixed by #49832
Closed

Upload beforeUpload 在拖拽上传directory时预期行为不一致 #49252

mansion-sun opened this issue Jun 5, 2024 · 11 comments · Fixed by #49832
Assignees

Comments

@mansion-sun
Copy link
Contributor

mansion-sun commented Jun 5, 2024

What problem does this feature solve?

在使用Upload Dragger做纯前端上传应用时,可以在上传directory和拖拽上传directory时,在beforeUpload二个参数中获取fileList

What does the proposed API look like?

Upload beforeUpload 在拖拽上传directory时,第二个参数中fileList返回的是本次上传的所有文件列表;与选择文件夹上传directory时行为保持一致。
部分代码如下

  // 拖拽上传组件属性对象
  const draggerProps = {
    className: styles["upload-dragger-container-wrapper"],
    name: 'fileList',
    directory: true,
    showUploadList: false,
    beforeUpload: (file, fileList) => {
      console.log('beforeUpload file, fileList', file, fileList)
// 选择文件夹上传时此处fileList正常,当拖拽上传文件夹时此处是每次上传的file
      setFileList(fileList);
      return false;
    },
    // fileList,
    onChange({fileList} = {}) {
      console.log('onChange fileList', fileList)
// 每次上传都要清空fileList,不能使用此处的fileList
      // setFileList(fileList);
    },
    onDrop(e) {
      console.log('Dropped fileList', e.dataTransfer.files);
    },
  };

重现用例:
https://codesandbox.io/p/sandbox/tuo-zhuai-shang-chuan-antd-4-24-12-forked-kjrx4q?file=%2Fdemo.tsx%3A12%2C1

@afc163 afc163 added the 🤔 Need Reproduce We cannot reproduce your problem label Jun 5, 2024
Copy link
Contributor

github-actions bot commented Jun 5, 2024

Hello @mansion-sun. Please provide a online reproduction by forking codesandbox of [email protected] or [email protected], or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @mansion-sun,我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [email protected][email protected] 的 codesandbox,或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

什么是最小化重现,为什么这是必需的?

@mansion-sun
Copy link
Contributor Author

mansion-sun commented Jun 5, 2024

@afc163
Copy link
Member

afc163 commented Jun 5, 2024

图片

@mansion-sun
Copy link
Contributor Author

mansion-sun commented Jun 6, 2024

@afc163 大佬,已更新
https://codesandbox.io/p/sandbox/tuo-zhuai-shang-chuan-antd-4-24-12-forked-kjrx4q?file=%2Fdemo.tsx%3A12%2C1&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clx1n8n250006356jl6q5ah17%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clx1n8n240002356jarbsrk5i%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clx1n8n240003356jgneezjan%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clx1n8n240005356jhuaiweqn%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clx1n8n240002356jarbsrk5i%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clx1n8n240001356j9l0q8cfc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clx2io6es0002356j9nno03oa%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A12%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A12%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fdemo.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clx1n8n240002356jarbsrk5i%2522%252C%2522activeTabId%2522%253A%2522clx2io6es0002356j9nno03oa%2522%257D%252C%2522clx1n8n240005356jhuaiweqn%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clx1n8n240004356j04hkx007%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clx1n8n240005356jhuaiweqn%2522%252C%2522activeTabId%2522%253A%2522clx1n8n240004356j04hkx007%2522%257D%252C%2522clx1n8n240003356jgneezjan%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clx1n8n240003356jgneezjan%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

@coderz-w
Copy link
Contributor

coderz-w commented Jun 6, 2024

我来看看

@coderz-w
Copy link
Contributor

coderz-w commented Jun 7, 2024

我来看看

大概什么时候,可以在antd4.x看到这个修复

4已经不维护了吧,现在已经改好了在想怎么写单侧

@mansion-sun
Copy link
Contributor Author

如果不升级5,有什么替代方案可以修复这个问题

@mansion-sun
Copy link
Contributor Author

https://ant-design.antgroup.com/docs/react/migration-v5-cn#%E9%80%9A%E8%BF%87%E5%88%AB%E5%90%8D%E5%AE%89%E8%A3%85-v5
我尝试了antd-v5,目前并未生效,预计什么时候发布可以透漏下

@yoyo837
Copy link
Contributor

yoyo837 commented Jul 11, 2024

Fixed in react-component/upload#561

@yoyo837 yoyo837 closed this as completed Jul 11, 2024
@zombieJ
Copy link
Member

zombieJ commented Jul 11, 2024

要发个 minor,我先 reopen 一下下哈~

@ZhouJiahao228
Copy link

所以现在有啥好办法解决? 拿 file 自己去构造 fileList 之后再去使用?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants