Skip to content

Sender 组件希望能够支持一次粘贴多个附件 #494

Closed
@ztkuaikuai

Description

需求动机

场景:

复制多个文件粘贴在 Sender 输入框中,预期能够将所有复制的文件都展示在附件框中

现状:

Sender 的 onPasteFile 回调只能获取到粘贴的第一个图片,无法实现粘贴多个附件一次上传

相关代码:

const onInternalPaste: React.ClipboardEventHandler<HTMLElement> = (e) => {
    // Get file
    const file = e.clipboardData?.files[0];
    if (file && onPasteFile) {
        onPasteFile(file);
        e.preventDefault();
    }

    onPaste?.(e);
};

可在粘贴图片 Demo 中复现

提议的 API 是什么样的?

希望能够将 onPasteFile 改为 onPasteFiles,暴露出文件列表,供用户使用,从而实现粘贴多个文件的功能

属性 说明 类型 默认值 版本
onPasteFiles 粘贴文件的回调 (files: FileList) => void - -

Activity

ztkuaikuai

ztkuaikuai commented on Jan 23, 2025

@ztkuaikuai
ContributorAuthor

如果有这方面的考虑,我很乐意实现这个需求

因为此提议涉及到破坏性变更,也许可以在 onPasteFile 的基础上做向后兼容,或者新增一个新回调?

YumoImer

YumoImer commented on Jan 24, 2025

@YumoImer
Collaborator

目前 Sender 支持传入 onPaste ,感觉可以解决这个需求,你觉得呢~

ztkuaikuai

ztkuaikuai commented on Jan 24, 2025

@ztkuaikuai
ContributorAuthor

确实可以解决这个需求,但是我认为 onPasteFile 只能拿到复制的第一个文件不太合理,这个回调的使用场景限制的太死了,如果粘贴多个文件的功能需要用 onPaste 实现,那 onPasteFile 这个回调也许没有存在的必要。

所以我认为可以把 onPasteFile 回调传递的参数增加一个 FileList,让组件开发者有更多的选择

YumoImer

YumoImer commented on Jan 24, 2025

@YumoImer
Collaborator

有道理,你提议的「增加一个 FileList 的参数」我想了两个方案:

// A
onPasteFile?: (file: File, files?: FileList) => void;
// B
onPasteFile?: (value: File | FileList) => void;

你觉得哪种更合理些?

ztkuaikuai

ztkuaikuai commented on Jan 24, 2025

@ztkuaikuai
ContributorAuthor

考虑到向后兼容,我觉得 A 可能更好一些~不会影响到之前使用此回调的人;

B 的话,我没有找到能向后兼容的思路

YumoImer

YumoImer commented on Jan 24, 2025

@YumoImer
Collaborator

好的,那就按 A RFC 之。

Todo:V2 版本

onPasteFile?: (files: FileList) => void;
ztkuaikuai

ztkuaikuai commented on Jan 24, 2025

@ztkuaikuai
ContributorAuthor

好嘞,我写下RFC

ztkuaikuai

ztkuaikuai commented on Jan 24, 2025

@ztkuaikuai
ContributorAuthor

@YumoImer 我还有一个事情想明确下🥹,A 方案中 files 的类型为 File[],这意味着需要将原始的类数组 FileList 转换为 File[],这样符合你的预期不

onPasteFile?: (file: File, files?: File[]) => void;
YumoImer

YumoImer commented on Jan 24, 2025

@YumoImer
Collaborator

@YumoImer 我还有一个事情想明确下🥹,A 方案中 files 的类型为 File[],这意味着需要将原始的类数组 FileList 转换为 File[],这样符合你的预期不

onPasteFile?: (file: File, files?: File[]) => void;

不好意思,我的问题,使用原始类型 FileList 即可。(已经更新至上述评论)

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

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

    Participants

    @ztkuaikuai@YumoImer

    Issue actions

      Sender 组件希望能够支持一次粘贴多个附件 · Issue #494 · ant-design/x