是否可以自定义修改Filestack弹出框(popin)的标题？

AI 小北

2026-10-5

Filestack 弹窗自定义实现方案

1. 自定义弹窗标题与CSV说明

在初始化Filestack上传组件（Picker）时，通过customText配置项直接覆盖默认弹窗标题，你可以把CSV文件的所有说明信息直接写在对应字段中，示例代码如下：

const filestackClient = filestack.init('你的Filestack API密钥');
const csvUploadPicker = filestackClient.picker({
  // 限制仅可上传CSV格式文件
  accept: 'text/csv',
  customText: {
    // 此处直接填写你需要展示的CSV相关说明，支持换行
    popinTitle: 'CSV文件上传须知：\n1. 文件编码请使用UTF-8\n2. 首行必须包含表头字段\n3. 单文件大小不可超过5MB',
    // 可选：同步修改其他按钮文本适配场景
    uploadFiles: '确认上传CSV文件'
  },
  // 可选：仅保留本地文件上传入口，隐藏其他云存储上传源
  fromSources: ['local_file_system']
});
// 调用方法打开上传弹窗
csvUploadPicker.open();

2. 移除默认电脑图标替换为自定义文本

通过CSS样式覆盖即可实现需求，你可以将以下规则添加到项目全局样式文件中，也可以通过Picker的customCss配置项传入：

/* 隐藏默认的电脑图标 */
.fsp-popin__icon {
  display: none !important;
}
/* 在原图标位置插入自定义文本 */
.fsp-popin__header::before {
  /* 此处替换为你需要展示的自定义文本 */
  content: "CSV上传";
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
  color: #2c3e50;
}