如何修改UploadThing上传组件的默认标题文本？

UploadThing官方提供了标准配置方式，通过UploadDropzone组件的text属性即可覆盖默认提示文本，无需修改元素代码。

可自定义的文本项 #

• dropPrompt: 拖拽区域的提示文本
• buttonText: 选择文件按钮的文本
• uploadingText: 文件上传中的提示文本
• completedText: 上传完成后的提示文本

修改后的组件代码 #

"use client";

import toast from "react-hot-toast";

import { UploadDropzone } from "@/lib/uploadthing";
import { ourFileRouter } from "@/app/api/uploadthing/core";

interface FileUploadProps {
  onChange: (url?: string) => void;
  endpoint: keyof typeof ourFileRouter;
};

export const FileUpload = ({
  onChange,
  endpoint,
}: FileUploadProps) => {
  return (
    <UploadDropzone
      endpoint={endpoint}
      // 自定义上传区域文本
      text={{
        dropPrompt: "拖拽文件到此处上传",
        buttonText: "选择本地文件",
        uploadingText: "正在处理文件...",
        completedText: "上传成功！"
      }}
      onClientUploadComplete={(res) => {
        onChange(res?.[0].url);
      }}
      onUploadError={(error: Error) => {
        toast.error(`${error?.message}`);
      }}
    />
  )
}

注意事项 #

• 不需要自定义的文本项可以省略，组件会自动使用默认值
• 所有文本支持传入任意字符串，适配不同场景需求

内容的提问来源于stack exchange，提问作者Павел Каршанков