[RFC] Sender onPasteFile 回调增加 files 参数，以支持获取到黏贴文件列表

[ztkuaikuai]

Summary

给 Sender 组件中 onPasteFile 回调添加 files: FileList 参数。

当用户复制多个文件黏贴在 Sender 输入框中，开发者能够获取到所有复制的文件，从而方便后续处理。

link to: #494

Motivation

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);
};

API

属性	说明	类型	默认值	版本
onPasteFile	黏贴文件的回调	(firstFile: File, files: FileList) => void	-	-
onPasteFile	Callback when paste files	(firstFile: File, files: FileList) => void	-	-

interface SenderProps {
    // ...
    onPasteFile?: (firstFile: File, files: FileList) => void;
}

usage

修改自粘贴图片 Demo ：

import { CloudUploadOutlined, LinkOutlined } from '@ant-design/icons';
import { Attachments, AttachmentsProps, Sender } from '@ant-design/x';
import { App, Button, Flex, type GetProp, type GetRef } from 'antd';
import React from 'react';

const Demo = () => {
  const [open, setOpen] = React.useState(false);
  const [items, setItems] = React.useState<GetProp<AttachmentsProps, 'items'>>([]);
  const [text, setText] = React.useState('');

  const attachmentsRef = React.useRef<GetRef<typeof Attachments>>(null);

  const senderRef = React.useRef<GetRef<typeof Sender>>(null);

  const senderHeader = (
    <Sender.Header
      title="Attachments"
      styles={{
        content: {
          padding: 0,
        },
      }}
      open={open}
      onOpenChange={setOpen}
      forceRender
    >
      <Attachments
        ref={attachmentsRef}
        // Mock not real upload file
        beforeUpload={() => false}
        items={items}
        onChange={({ fileList }) => setItems(fileList)}
        placeholder={(type) =>
          type === 'drop'
            ? {
                title: 'Drop file here',
              }
            : {
                icon: <CloudUploadOutlined />,
                title: 'Upload files',
                description: 'Click or drag files to this area to upload',
              }
        }
        getDropContainer={() => senderRef.current?.nativeElement}
      />
    </Sender.Header>
  );

  return (
    <Flex style={{ height: 220 }} align="end">
      <Sender
        ref={senderRef}
        header={senderHeader}
        prefix={
          <Button
            type="text"
            icon={<LinkOutlined />}
            onClick={() => {
              setOpen(!open);
            }}
          />
        }
        value={text}
        onChange={setText}
        onPasteFile={(_, files) => {
          for (const file of files) {
            attachmentsRef.current?.upload(file);
          }
          setOpen(true);
        }}
        onSubmit={() => {
          setItems([]);
          setText('');
        }}
      />
    </Flex>
  );
};

export default () => (
  <App>
    <Demo />
  </App>
);