如何将Uploadcare默认上传按钮替换为自定义触发组件？

方案一：使用renderTrigger属性直接替换触发元素 #

组件自带的renderTrigger属性可以让你完全自定义触发按钮，同时自动隐藏默认的「Upload file」按钮，点击自定义元素时会自动打开上传模态框。

代码示例：

import { FileUploaderRegular } from '@uploadcare/react-uploader/next'

<FileUploaderRegular
  sourceList="local, url, camera, gdrive"
  pubkey={process.env.NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY!}
  multiple={false}
  renderTrigger={({ open }) => (
    // 这里可以替换成任何你需要的自定义组件，比如图标按钮、自定义样式的按钮
    <button style={{ padding: '8px 16px', background: '#2563eb', color: 'white', border: 'none', borderRadius: '4px' }}>
      选择并上传文件
    </button>
  )}
/>

方案二：受控模式手动控制模态框 #

如果需要更灵活的触发逻辑（比如结合其他业务状态控制模态框显示），可以使用受控模式，手动隐藏默认按钮并控制模态框的开闭状态。

代码示例：

import { useState } from 'react'
import { FileUploaderRegular } from '@uploadcare/react-uploader/next'

const CustomUploader = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)

  return (
    <>
      {/* 自定义触发元素 */}
      <button 
        onClick={() => setIsModalOpen(true)}
        style={{ padding: '8px 16px', background: '#2563eb', color: 'white', border: 'none', borderRadius: '4px' }}
      >
        点击上传文件
      </button>

      {/* 隐藏默认按钮，通过props控制模态框状态 */}
      <FileUploaderRegular
        sourceList="local, url, camera, gdrive"
        pubkey={process.env.NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY!}
        multiple={false}
        modalOpen={isModalOpen}
        onModalClose={() => setIsModalOpen(false)}
        style={{ display: 'none' }}
      />
    </>
  )
}

export default CustomUploader

注意事项 #

• 自定义触发元素不限于按钮，任何React组件（如div、图标组件等）都可以作为触发源
• 方案一中的renderTrigger会自动绑定点击打开模态框的逻辑，无需手动添加onClick

内容的提问来源于stack exchange，提问作者Islam Y-