如何在Uppy Dashboard Modal中显示自定义按钮与消息？

Uppy的<DashboardModal>组件不支持直接通过子元素传入自定义内容，它的内部DOM结构由Uppy自身封装控制，你直接写的<h1>和<Button>不会被渲染。以下是两种可行的实现方式：

方法一：利用事件钩子动态插入内容 #

在组件挂载后，监听Uppy的dashboard:modal-open事件，获取模态框容器后插入自定义元素：

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import DashboardModal from '@uppy/react/lib/DashboardModal';
import Button from './你的按钮组件路径';

const UploadModal = ({ uppy, id, uploadModalId }) => {
  useEffect(() => {
    const insertCustomContent = () => {
      const modalInner = document.querySelector(`#${id || uploadModalId} .uppy-Dashboard-inner`);
      if (!modalInner) return;

      // 创建自定义内容容器
      const customWrap = document.createElement('div');
      customWrap.style.padding = '1rem';
      // 用React渲染自定义元素
      ReactDOM.render(
        <>
          <h1>Hello World</h1>
          <Button onClick={() => {
            // 这里添加按钮点击逻辑，比如触发Uppy操作
            console.log('自定义按钮被点击');
          }}>Hi</Button>
        </>,
        customWrap
      );

      // 插入到模态框内部的顶部
      modalInner.prepend(customWrap);
    };

    uppy.on('dashboard:modal-open', insertCustomContent);

    // 清理函数：移除事件监听和自定义元素
    return () => {
      uppy.off('dashboard:modal-open', insertCustomContent);
      const customWrap = document.querySelector(`#${id || uploadModalId} .uppy-Dashboard-inner div:first-child`);
      if (customWrap) {
        ReactDOM.unmountComponentAtNode(customWrap);
        customWrap.remove();
      }
    };
  }, [uppy, id, uploadModalId]);

  return (
    <DashboardModal
      uppy={uppy}
      id={id || uploadModalId}
      inline
      disableStatusBar
      proudlyDisplayPoweredByUppy={false}
      showSelectedFiles={false}
      locale={{
        strings: {
          dropPaste: ''
        }
      }}
      plugins={['Dropbox', 'GoogleDrive']}
      width='100vw'
      height='177px'
    />
  );
};

export default UploadModal;

方法二：自定义Uppy插件扩展Dashboard #

创建一个Uppy插件，在Dashboard初始化时注入自定义UI，这种方式更符合Uppy的插件化设计：

import React from 'react';
import ReactDOM from 'react-dom';
import DashboardModal from '@uppy/react/lib/DashboardModal';
import Button from './你的按钮组件路径';

// 自定义Uppy插件
const CustomDashboardUI = (uppy) => {
  return {
    id: 'CustomDashboardUI',
    install() {
      const dashboard = uppy.getPlugin('Dashboard');
      if (!dashboard) return;

      // 监听Dashboard挂载完成事件
      dashboard.on('mounted', () => {
        const modalInner = dashboard.getModal().querySelector('.uppy-Dashboard-inner');
        if (!modalInner) return;

        const customContainer = document.createElement('div');
        customContainer.style.padding = '1rem';
        modalInner.prepend(customContainer);

        // 渲染自定义React内容
        ReactDOM.render(
          <>
            <h1>Hello World</h1>
            <Button onClick={() => {
              // 自定义按钮逻辑
              uppy.log('自定义按钮触发');
            }}>Hi</Button>
          </>,
          customContainer
        );
      });
    },
    uninstall() {
      const dashboard = uppy.getPlugin('Dashboard');
      if (!dashboard) return;

      const customContainer = dashboard.getModal().querySelector('.uppy-Dashboard-inner div:first-child');
      if (customContainer) {
        ReactDOM.unmountComponentAtNode(customContainer);
        customContainer.remove();
      }
    }
  };
};

const UploadModal = ({ uppy, id, uploadModalId }) => {
  React.useEffect(() => {
    // 注册自定义插件
    uppy.use(CustomDashboardUI);
    return () => {
      // 组件卸载时移除插件
      uppy.removePlugin('CustomDashboardUI');
    };
  }, [uppy]);

  return (
    <DashboardModal
      uppy={uppy}
      id={id || uploadModalId}
      inline
      disableStatusBar
      proudlyDisplayPoweredByUppy={false}
      showSelectedFiles={false}
      locale={{
        strings: {
          dropPaste: ''
        }
      }}
      plugins={['Dropbox', 'GoogleDrive']}
      width='100vw'
      height='177px'
    />
  );
};

export default UploadModal;

注意事项 #

• 确认Uppy版本对应的DOM类名，若.uppy-Dashboard-inner无效，可通过浏览器开发者工具查看实际的容器类名
• 使用React渲染自定义元素时，务必在组件卸载时执行unmountComponentAtNode，避免内存泄漏
• 自定义样式可以通过CSS类覆盖Uppy的默认样式，或者直接给自定义元素添加行内样式

内容的提问来源于stack exchange，提问作者abduljalil