Skip to content

Upload.Dragger can't trigger beforeUpload when accept is not empty #36318

Closed
react-component/upload
#627

Description

@Sanford284

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. I hava a accept attribute of Upload.Dragger component, now I need upload a file which extension doesn't match accept
  2. click to upload, beforeUpload triggered
  3. drag to upload, beforeUpload not triggered

What is expected?

drag to upload, beforeUpload also triggered

What is actually happening?

drag to upload, beforeUpload not triggered

Environment Info
antd 4.21.4
React 18.2.0
System win10
Browser edge 102

I want to do some checking work on beforeUpload hook. but when drag file into box, beforeUpload not triggered.

Activity

  1. Sanford284 commented on Jun 30, 2022

    @Sanford284
    Author

    same issue not solved at 2019. #17090

  2. afc163 commented on Jun 30, 2022

    @afc163
    Member
  3. Sanford284 commented on Jun 30, 2022

    @Sanford284
    Author

    #30403 (comment)
    我是 windows系统,可以选择非 accept 文件,此时 beforeUpload 还是没有触发的。
    https://github.com/react-component/upload/pull/329/files 看起来没有解决这个问题

  4. OliverLeighC commented on Apr 27, 2023

    @OliverLeighC

    any update on this?

  5. auki-zy commented on Jun 16, 2023

    @auki-zy

    @afc163 目前添加 accept 属性,Dragger 拖入非 accept 的文件没有走到 beforeUpload,有什么方案可以处理下

  6. dqrjz commented on May 8, 2024

    @dqrjz

    @afc163 目前添加 accept 属性,Dragger 拖入非 accept 的文件没有走到 beforeUpload,有什么方案可以处理下

    +1 当用户拖入非 accept 的文件,目前是没有任何反应的。我想要弹出message(例如”该类型文件不支持“),好像没法实现。只有onDrop会触发,但onDrop里只有DragEvent,没有file的信息。

  7. chenxiaoleizi commented on Aug 14, 2024

    @chenxiaoleizi

    可以在 DragEvent 中拿到 file

    function handleDrop(event: DragEvent) {
      const files = event.dataTransfer?.files;
      if (files) {
        const filesArr = Array.from(files);
        filesArr.forEach((file) => {
          // 校验
        });
      }
    }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions