如何在FilePond加载文件时设置文件名占位符？

问题背景 #

使用react-filepond组件，通过自定义server.load函数从服务器拉取文件，加载过程中文件名区域显示"undefined"，需替换为自定义占位符或移除该显示；尝试在初始files数组中设置文件名后，自定义load函数不再触发，需要兼顾触发加载和占位显示的方案。

可行解决方案 #

方案一：初始文件项配置source+临时文件名（推荐） #

要触发load函数，必须给初始文件项提供source字段（该值会作为loadFile的第一个参数传入），同时设置file.name作为加载时的占位名。加载完成后，FilePond会自动替换为真实文件的名称。

修改初始files状态：

const [files, setFiles] = useState([
  {
    source: 'file-unique-id', // 可传入文件ID等标识，供load函数识别要下载的文件
    options: {
      type: 'local',
      file: {
        name: '正在加载文件...', // 自定义占位文本
      },
    },
  }
] as any[]);

此方案既保证loadFile函数正常触发，又能在加载过程中显示自定义占位符，加载完成后自动切换为真实文件名。

方案二：监听加载状态动态更新文件名 #

通过onloadingstatechange事件监听文件加载状态，在加载开始时设置占位名，加载完成后恢复真实文件名：

const handleLoadingStateChange = (file, isLoading) => {
  if (isLoading) {
    // 更新当前文件的显示名称为占位符
    setFiles(prevFiles => 
      prevFiles.map(item => 
        item.id === file.id 
          ? { ...item, options: { ...item.options, file: { name: '加载中...' } } } 
          : item
      )
    );
  }
};

// 在FilePond组件中添加事件监听
<FilePond
  files={files}
  onupdatefiles={setFiles}
  onloadingstatechange={handleLoadingStateChange}
  maxFiles={1}
  acceptedFileTypes={[
    'application/vnd.ms-excel',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  ]}
  server={{
    load: loadFile,
  }}
/>

方案三：CSS隐藏undefined文本 #

若仅需移除"undefined"显示，无需自定义占位符，可通过CSS直接隐藏加载状态下的文件名区域：

/* 隐藏加载中文件的文件名 */
.filepond--file[data-state="loading"] .filepond--file-info-main {
  display: none;
}

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