ToolJet File Picker 组件详解拖拽上传、文件校验、内容解析与 base64 变量实战【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet本文基于 ToolJet 官方文档中的 File Picker文件选择器组件说明结合仓库前端源码完整讲解该组件的全部属性、校验规则、事件、组件级动作CSA、暴露变量、内容解析Parse content能力以及样式与响应式配置。读完后你可以正确配置 File Picker 的接受文件类型与大小/数量限制、理解其拒绝文件的底层校验逻辑、通过base64Data等暴露变量将文件写入数据库、并启用 CSV/Excel 文件自动解析。组件概述File Picker组件允许用户通过拖拽drag and drop或浏览文件系统的方式选择一个或多个文件。它内置了完整的文件校验体系文件类型、文件大小上下限、文件数量上下限、内容解析能力CSV/xls/xlsx 等并以 JavaScript 变量形式暴露解析结果方便后续写入数据库或展示。两个重要的使用前提来自官方文档文件类型格式Accept file types必须是一个符合 input 元素规范的合法 MIME 类型或者是一个合法的文件扩展名。若希望接受任意/所有文件类型将Accept file types置为空值即可。MIME 类型不可跨平台依赖MIME 类型判定在不同操作系统上并不可靠。例如 CSV 文件在 macOS 上报为text/plain而在 Windows 上报为application/vnd.ms-excel。因此在做“按类型解析”或“按类型校验”时要预留这种差异。从源码结构看File Picker 的完整实现位于 FilePicker 组件核心业务逻辑文件读取、校验、事件触发、变量暴露封装在 useFilePicker Hook 中组件的元数据属性、事件、动作、默认值定义在 filepicker 配置 中。拖拽区域基于react-dropzone库实现。Properties核心属性文档列出的属性与源码中的元数据一一对应下表在继承原文档说明的基础上补充了源码中的默认值与字段名属性UI 名称源码字段说明默认值源码Instruction textinstructionText设置说明文字用于向用户解释文件选择器Drag and drop files or click here to uploadUse drop zoneenableDropzone创建拖拽区文件可拖入该区域true新组件定义值Use file pickerenablePicker点击时唤起操作系统默认文件选择对话框true新组件定义值Pick multiple filesenableMultiple允许多文件拖拽/选择falseMax file countmaxFileCount允许的最大文件数2Min file countminFileCount允许的最小文件数开启多文件后显示0Accept file typesfileType指定接受的文件类型拒绝其他类型示例{image/*,application/pdf,application/msword}image/*Max size limitmaxSize单个文件最大字节数新组件为51200000约 50 MBschema 默认1048576Min size limitminSize单个文件最小字节数50Make this field mandatoryenableValidation是否必填表单提交时校验false以上默认值来自 filepicker.js 中validation与definition段如maxFileCount默认{{2}}、fileType默认image/*。注意文档中提到Pick multiple files默认关闭——开启多文件后Min file count与Max file count两个字段才会在检查器面板中条件性渲染源码中通过conditionallyRender绑定enableMultiple: true实现。文件接受/拒绝规则原文档 tip 中说明了三条接受/拒绝规则源码中的validateFile自定义校验器与onDropRejected处理逻辑完整实现了它们类型不符即拒绝Accept file types配置的字符串会被按逗号切分并转换为react-dropzone的accept对象结构见 acceptProp 计算逻辑不匹配的文件被 dropzone 以file-invalid-type拒绝UI 提示The file xxx has an unsupported file type. Please upload files of type: xxx。超出数量限制若Pick multiple files为false却一次拖入多个文件除第一个外的文件全部被拒绝Only one file can be uploaded.多文件模式下达到Max file count后组件自动禁用选择并拒绝后续文件。大小超界即拒绝文件小于Min size limit或大于Max size limit时分别以file-too-small/file-too-large拒绝并给出包含实际大小与限制值的格式化提示。此外源码中还实现了文档未显式展开的重复文件检测duplicate-filename/size/lastModified/type 完全一致的文件会被判定为重复并拒绝以及minFileCount未满足时的提示Please select at least N files.。所有拒绝提示都会在 10 秒后自动清除。文件类型快捷选项检查器面板为Accept file types提供了一组预设下拉选项可切换 fx 编辑任意表达式定义在 Inspector FilePicker 组件 中选项实际值Any Files*/*Image filesimage/*Document files.pdf,.doc,.docx,.ppt,.pptxSpreadsheet files.xls,.xlsx,.csv,.odsText filestext/*,.md,.json,.xml,.yamlAudio filesaudio/*Video filesvideo/*Archive/Compressed files.zip,.rar,.7z,.tar,.gzEvents事件事件触发时机On File Selected用户通过选择对话框选定一个或多个文件时触发On File Loaded文件在浏览器中读取完成时触发On File Deselected一个或多个文件被从选择器中移除时触发从 onDrop 处理 可以看到事件触发的精确时序文件接受后先触发onFileSelected随后每个文件经FileReader分别以文本readAsText和 DataURLreadAsDataURL两种方式读取base64 字符串取 DataURL 逗号之后的部分全部文件处理完毕且至少有一个成功时才携带files数组触发onFileLoaded。移除文件时handleRemoveFile触发onFileDeselected并传入该文件对象。三个事件在 filepicker 配置 中注册为onFileSelected、onFileLoaded、onFileDeselected。官方文档还提供了一个进阶指引使用 base64 字符串引用/展示图片或 PDF。该教程的完整流程是在 ToolJet Database 中创建表testDB添加pdf和image两个varchar列放置两个 File PickerimagePicker、pdfPicker分别将 Accept file types 设为image/*和pdf/*建一个 Create Row 查询列值分别写{{components.pdfPicker.file[0].base64Data}}与{{components.imagePicker.file[0].base64Data}}用按钮触发该查询写入数据库再用 List rows 查询取出在 Image/PDF 组件中拼 Data URL{{data:image;base64, queries.getFiles.data[0].image}}/{{data:pdf;base64, queries.getFiles.data[0].pdf}}。这条链路正是 File Picker 暴露变量base64Data的典型实战用法。Component Specific Actions (CSA)官方文档列出的动作为clearFiles()从当前仓库的 actions 元数据 看File Picker 实际暴露了更完整的动作集动作说明访问方式clearFiles()清空已选择的全部文件RunJS 查询如await components.filepicker1.clearFiles()或事件触发setFileName(indexOrUpdates, newNameIfSingle)按索引重命名文件支持单条(index, newName)或批量[{index, newFileName}]自动保留原扩展名同上setVisibility(value)动态控制组件可见性同上setLoading(value)动态控制加载状态同上setDisable(value)动态控制禁用状态同上clearFiles的实现在 useFilePicker Hook 中它同时重置文件列表、错误状态与上传状态并被注册为表单清空form clear回调的一部分即表单被整体清空时 File Picker 也会自动清空。setFileName实现细节L453-L490会拆分原文件名保留扩展名空名字会保持原文件不变。Exposed Variables暴露变量文档定义的file变量是一个文件对象数组每项包含name、type、content、dataURL、base64Data、parsedData、filePath可通过{{components.filepicker1.file[0].base64Data}}动态访问。从源码看暴露变量注册逻辑实际暴露的变量比文档表格更丰富变量说明file文档所述的兼容格式文件数组含 name/type/content/dataURL/base64Data/parsedData/filePathfiles新版完整文件对象数组额外含 size、lastModified、webkitRelativePath、parsedValue 等fileSize当前所有已选文件的总字节数源码按selectedFiles.reduce求和isParsing是否正在解析文件内容isValid是否通过必填/最小数量/自定义规则校验isMandatory/isLoading/isVisible/isDisabled必填、加载、可见、禁用状态uiErrorMessage当前 UI 错误提示文本clearFiles/clear/setFileName动作函数本身也可在表达式中引用其中content是FileReader.readAsText的文本结果base64Data/dataURL是去掉前缀的 base64 载荷二者来自同一次 fileReader 调用。filePath来自浏览器 File 对象的path属性——需注意这是浏览器安全模型下通常不可依赖的字段。OptionsParse content 内容解析选项说明Parse content解析所选文件支持CSV、xls、xlsxFile type开启 Parse content 后可选自动识别按扩展名/MIME或指定文件类型解析使用注意原文档关闭 Parse content 时 File type 选项不可用开启后只解析之后新选中的文件不解析之前已选的文件源码中解析发生在onDrop流程内即每次文件进入选择器时才执行。从 fileProcessing 实现 可以看到解析能力比文档描述还宽CSV/TSV/TXT使用 PapaParseRFC 4180 兼容header: true首行作为键skipEmptyLines: greedy跳过空行表头自动 trimxls/xlsx使用 SheetJSxlsx 库base64 解码后读取第一个工作表并转为 JSON 数组defval: 补空值返回{ Sheet1: [...] }结构JSON使用 JSON5 解析容忍注释、尾逗号等宽松语法分隔符可配置File type 选 CSV 时检查器会出现Delimiter选项默认,TSV 固定使用制表符。parseFileContentEnabled 决定单个文件是否进入解析auto-detect 模式下仅当文件 MIME 命中内置可解析类型csv/txt/tsv/xls/xlsx/json才解析指定类型模式下还会做 MIME 包含匹配并且选 CSV 时text/plain的文本文件也会被当作 CSV 解析——这恰好缓解了文档 tip 中提到的“CSV 的 MIME 跨平台不一致”问题Windows 上报的application/vnd.ms-excel会走 Excel 解析路径。解析结果写入文件对象的parsedData文档所述/parsedValue字段解析期间isParsing暴露变量为true。GeneralTooltip 与其他通用能力Tooltip鼠标悬停在组件上时展示补充信息。在 General 分组下以字符串格式设置悬停即显示。从当前源码的 properties 元数据 看Tooltip 还新增了tooltipFormat开关支持plainText默认/markdown/html三种渲染格式。组件还提供以下附加控制对应源码additionalActions段Show loading state主动触发加载骨架/转圈状态Visibility布尔值{{false}}时应用部署后组件不可见Disable布尔值{{true}}时组件锁定且不可交互源码中会叠加 0.5 透明度样式并禁用 dropzone 交互。所有带fx按钮的属性都可以编程式配置fx 激活后填入表达式。Devices桌面端/移动端显示属性说明期望值Show on desktop桌面视图中显示组件开关直接设置或点击fx填入逻辑表达式动态配置Show on mobile移动视图中显示组件同上新组件的定义值为桌面显示、移动端隐藏definition.othersshowOnDesktop: {{true}}、showOnMobile: {{false}}。Styles样式样式说明默认值Visibility控制组件可见性仅接受布尔值{{true}}Disable仅接受布尔值{{true}}时组件锁定不可用{{false}}Border radius修改 File Picker 圆角源码中为数值输入框当前新组件默认6文档历史默认0取值范围以检查器为准Box shadow容器阴影0px 1px 3px #0000001APadding容器内边距default/none两档defaultTitle拖拽区标题颜色主题变量var(--cc-primary-text)样式值通过 CSS 自定义属性注入根节点如--file-picker-border-radius见 FilePicker 组件的样式注入逻辑。端到端配置示例综合以上各节一个“单文件、仅收 PDF、5 MB 上限”的典型配置以 fx 表达式形式为// 属性 {{components.filepicker1.properties.enableDropzone}} // true 允许拖拽 {{components.filepicker1.properties.enablePicker}} // true 允许点击选择 {{components.filepicker1.properties.enableMultiple}} // false 单文件 // 校验 {{components.filepicker1.validation.fileType}} // pdf/* {{components.filepicker1.validation.minSize}} // 50 {{components.filepicker1.validation.maxSize}} // 5242880 {{components.filepicker1.validation.maxFileCount}} // 1配合事件与 RunJS// On File Loaded 事件处理器Run Query 或 RunJS // 将文件写入 ToolJet Database {{data:pdf;base64, components.filepicker1.file[0].base64Data}} // 需要清空时 await components.filepicker1.clearFiles();E2E 测试中对clearFiles动作的验证可见 csa 测试流程为对filepicker1执行 “Clear Files” 后断言文件区内容被清空可作为该 CSA 行为的参考依据。小结File Picker 是 ToolJet 中“上传 → 校验 → 解析 → 暴露变量”闭环完整的文件组件属性层覆盖说明文字、拖拽/选择开关、多文件与数量上下限、MIME 类型与大小上下限事件层提供 Selected/Loaded/Deselected 三个回调CSA 层支持清空、重命名、可见性、加载与禁用控制变量层提供file数组含 base64、解析数据、路径等与fileSize、isValid等辅助变量解析层内置 CSV/TSV/xls/xlsx/JSON 的自动识别与按类型解析。文档中所有字段与 filepicker 元数据、useFilePicker Hook 及 文件解析工具 的源码实现一一对应可直接用于开发内部工具中的文件上传、表单附件与数据导入场景。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ToolJet File Picker 组件详解：拖拽上传、文件校验、内容解析与 base64 变量实战
ToolJet File Picker 组件详解拖拽上传、文件校验、内容解析与 base64 变量实战【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet本文基于 ToolJet 官方文档中的 File Picker文件选择器组件说明结合仓库前端源码完整讲解该组件的全部属性、校验规则、事件、组件级动作CSA、暴露变量、内容解析Parse content能力以及样式与响应式配置。读完后你可以正确配置 File Picker 的接受文件类型与大小/数量限制、理解其拒绝文件的底层校验逻辑、通过base64Data等暴露变量将文件写入数据库、并启用 CSV/Excel 文件自动解析。组件概述File Picker组件允许用户通过拖拽drag and drop或浏览文件系统的方式选择一个或多个文件。它内置了完整的文件校验体系文件类型、文件大小上下限、文件数量上下限、内容解析能力CSV/xls/xlsx 等并以 JavaScript 变量形式暴露解析结果方便后续写入数据库或展示。两个重要的使用前提来自官方文档文件类型格式Accept file types必须是一个符合 input 元素规范的合法 MIME 类型或者是一个合法的文件扩展名。若希望接受任意/所有文件类型将Accept file types置为空值即可。MIME 类型不可跨平台依赖MIME 类型判定在不同操作系统上并不可靠。例如 CSV 文件在 macOS 上报为text/plain而在 Windows 上报为application/vnd.ms-excel。因此在做“按类型解析”或“按类型校验”时要预留这种差异。从源码结构看File Picker 的完整实现位于 FilePicker 组件核心业务逻辑文件读取、校验、事件触发、变量暴露封装在 useFilePicker Hook 中组件的元数据属性、事件、动作、默认值定义在 filepicker 配置 中。拖拽区域基于react-dropzone库实现。Properties核心属性文档列出的属性与源码中的元数据一一对应下表在继承原文档说明的基础上补充了源码中的默认值与字段名属性UI 名称源码字段说明默认值源码Instruction textinstructionText设置说明文字用于向用户解释文件选择器Drag and drop files or click here to uploadUse drop zoneenableDropzone创建拖拽区文件可拖入该区域true新组件定义值Use file pickerenablePicker点击时唤起操作系统默认文件选择对话框true新组件定义值Pick multiple filesenableMultiple允许多文件拖拽/选择falseMax file countmaxFileCount允许的最大文件数2Min file countminFileCount允许的最小文件数开启多文件后显示0Accept file typesfileType指定接受的文件类型拒绝其他类型示例{image/*,application/pdf,application/msword}image/*Max size limitmaxSize单个文件最大字节数新组件为51200000约 50 MBschema 默认1048576Min size limitminSize单个文件最小字节数50Make this field mandatoryenableValidation是否必填表单提交时校验false以上默认值来自 filepicker.js 中validation与definition段如maxFileCount默认{{2}}、fileType默认image/*。注意文档中提到Pick multiple files默认关闭——开启多文件后Min file count与Max file count两个字段才会在检查器面板中条件性渲染源码中通过conditionallyRender绑定enableMultiple: true实现。文件接受/拒绝规则原文档 tip 中说明了三条接受/拒绝规则源码中的validateFile自定义校验器与onDropRejected处理逻辑完整实现了它们类型不符即拒绝Accept file types配置的字符串会被按逗号切分并转换为react-dropzone的accept对象结构见 acceptProp 计算逻辑不匹配的文件被 dropzone 以file-invalid-type拒绝UI 提示The file xxx has an unsupported file type. Please upload files of type: xxx。超出数量限制若Pick multiple files为false却一次拖入多个文件除第一个外的文件全部被拒绝Only one file can be uploaded.多文件模式下达到Max file count后组件自动禁用选择并拒绝后续文件。大小超界即拒绝文件小于Min size limit或大于Max size limit时分别以file-too-small/file-too-large拒绝并给出包含实际大小与限制值的格式化提示。此外源码中还实现了文档未显式展开的重复文件检测duplicate-filename/size/lastModified/type 完全一致的文件会被判定为重复并拒绝以及minFileCount未满足时的提示Please select at least N files.。所有拒绝提示都会在 10 秒后自动清除。文件类型快捷选项检查器面板为Accept file types提供了一组预设下拉选项可切换 fx 编辑任意表达式定义在 Inspector FilePicker 组件 中选项实际值Any Files*/*Image filesimage/*Document files.pdf,.doc,.docx,.ppt,.pptxSpreadsheet files.xls,.xlsx,.csv,.odsText filestext/*,.md,.json,.xml,.yamlAudio filesaudio/*Video filesvideo/*Archive/Compressed files.zip,.rar,.7z,.tar,.gzEvents事件事件触发时机On File Selected用户通过选择对话框选定一个或多个文件时触发On File Loaded文件在浏览器中读取完成时触发On File Deselected一个或多个文件被从选择器中移除时触发从 onDrop 处理 可以看到事件触发的精确时序文件接受后先触发onFileSelected随后每个文件经FileReader分别以文本readAsText和 DataURLreadAsDataURL两种方式读取base64 字符串取 DataURL 逗号之后的部分全部文件处理完毕且至少有一个成功时才携带files数组触发onFileLoaded。移除文件时handleRemoveFile触发onFileDeselected并传入该文件对象。三个事件在 filepicker 配置 中注册为onFileSelected、onFileLoaded、onFileDeselected。官方文档还提供了一个进阶指引使用 base64 字符串引用/展示图片或 PDF。该教程的完整流程是在 ToolJet Database 中创建表testDB添加pdf和image两个varchar列放置两个 File PickerimagePicker、pdfPicker分别将 Accept file types 设为image/*和pdf/*建一个 Create Row 查询列值分别写{{components.pdfPicker.file[0].base64Data}}与{{components.imagePicker.file[0].base64Data}}用按钮触发该查询写入数据库再用 List rows 查询取出在 Image/PDF 组件中拼 Data URL{{data:image;base64, queries.getFiles.data[0].image}}/{{data:pdf;base64, queries.getFiles.data[0].pdf}}。这条链路正是 File Picker 暴露变量base64Data的典型实战用法。Component Specific Actions (CSA)官方文档列出的动作为clearFiles()从当前仓库的 actions 元数据 看File Picker 实际暴露了更完整的动作集动作说明访问方式clearFiles()清空已选择的全部文件RunJS 查询如await components.filepicker1.clearFiles()或事件触发setFileName(indexOrUpdates, newNameIfSingle)按索引重命名文件支持单条(index, newName)或批量[{index, newFileName}]自动保留原扩展名同上setVisibility(value)动态控制组件可见性同上setLoading(value)动态控制加载状态同上setDisable(value)动态控制禁用状态同上clearFiles的实现在 useFilePicker Hook 中它同时重置文件列表、错误状态与上传状态并被注册为表单清空form clear回调的一部分即表单被整体清空时 File Picker 也会自动清空。setFileName实现细节L453-L490会拆分原文件名保留扩展名空名字会保持原文件不变。Exposed Variables暴露变量文档定义的file变量是一个文件对象数组每项包含name、type、content、dataURL、base64Data、parsedData、filePath可通过{{components.filepicker1.file[0].base64Data}}动态访问。从源码看暴露变量注册逻辑实际暴露的变量比文档表格更丰富变量说明file文档所述的兼容格式文件数组含 name/type/content/dataURL/base64Data/parsedData/filePathfiles新版完整文件对象数组额外含 size、lastModified、webkitRelativePath、parsedValue 等fileSize当前所有已选文件的总字节数源码按selectedFiles.reduce求和isParsing是否正在解析文件内容isValid是否通过必填/最小数量/自定义规则校验isMandatory/isLoading/isVisible/isDisabled必填、加载、可见、禁用状态uiErrorMessage当前 UI 错误提示文本clearFiles/clear/setFileName动作函数本身也可在表达式中引用其中content是FileReader.readAsText的文本结果base64Data/dataURL是去掉前缀的 base64 载荷二者来自同一次 fileReader 调用。filePath来自浏览器 File 对象的path属性——需注意这是浏览器安全模型下通常不可依赖的字段。OptionsParse content 内容解析选项说明Parse content解析所选文件支持CSV、xls、xlsxFile type开启 Parse content 后可选自动识别按扩展名/MIME或指定文件类型解析使用注意原文档关闭 Parse content 时 File type 选项不可用开启后只解析之后新选中的文件不解析之前已选的文件源码中解析发生在onDrop流程内即每次文件进入选择器时才执行。从 fileProcessing 实现 可以看到解析能力比文档描述还宽CSV/TSV/TXT使用 PapaParseRFC 4180 兼容header: true首行作为键skipEmptyLines: greedy跳过空行表头自动 trimxls/xlsx使用 SheetJSxlsx 库base64 解码后读取第一个工作表并转为 JSON 数组defval: 补空值返回{ Sheet1: [...] }结构JSON使用 JSON5 解析容忍注释、尾逗号等宽松语法分隔符可配置File type 选 CSV 时检查器会出现Delimiter选项默认,TSV 固定使用制表符。parseFileContentEnabled 决定单个文件是否进入解析auto-detect 模式下仅当文件 MIME 命中内置可解析类型csv/txt/tsv/xls/xlsx/json才解析指定类型模式下还会做 MIME 包含匹配并且选 CSV 时text/plain的文本文件也会被当作 CSV 解析——这恰好缓解了文档 tip 中提到的“CSV 的 MIME 跨平台不一致”问题Windows 上报的application/vnd.ms-excel会走 Excel 解析路径。解析结果写入文件对象的parsedData文档所述/parsedValue字段解析期间isParsing暴露变量为true。GeneralTooltip 与其他通用能力Tooltip鼠标悬停在组件上时展示补充信息。在 General 分组下以字符串格式设置悬停即显示。从当前源码的 properties 元数据 看Tooltip 还新增了tooltipFormat开关支持plainText默认/markdown/html三种渲染格式。组件还提供以下附加控制对应源码additionalActions段Show loading state主动触发加载骨架/转圈状态Visibility布尔值{{false}}时应用部署后组件不可见Disable布尔值{{true}}时组件锁定且不可交互源码中会叠加 0.5 透明度样式并禁用 dropzone 交互。所有带fx按钮的属性都可以编程式配置fx 激活后填入表达式。Devices桌面端/移动端显示属性说明期望值Show on desktop桌面视图中显示组件开关直接设置或点击fx填入逻辑表达式动态配置Show on mobile移动视图中显示组件同上新组件的定义值为桌面显示、移动端隐藏definition.othersshowOnDesktop: {{true}}、showOnMobile: {{false}}。Styles样式样式说明默认值Visibility控制组件可见性仅接受布尔值{{true}}Disable仅接受布尔值{{true}}时组件锁定不可用{{false}}Border radius修改 File Picker 圆角源码中为数值输入框当前新组件默认6文档历史默认0取值范围以检查器为准Box shadow容器阴影0px 1px 3px #0000001APadding容器内边距default/none两档defaultTitle拖拽区标题颜色主题变量var(--cc-primary-text)样式值通过 CSS 自定义属性注入根节点如--file-picker-border-radius见 FilePicker 组件的样式注入逻辑。端到端配置示例综合以上各节一个“单文件、仅收 PDF、5 MB 上限”的典型配置以 fx 表达式形式为// 属性 {{components.filepicker1.properties.enableDropzone}} // true 允许拖拽 {{components.filepicker1.properties.enablePicker}} // true 允许点击选择 {{components.filepicker1.properties.enableMultiple}} // false 单文件 // 校验 {{components.filepicker1.validation.fileType}} // pdf/* {{components.filepicker1.validation.minSize}} // 50 {{components.filepicker1.validation.maxSize}} // 5242880 {{components.filepicker1.validation.maxFileCount}} // 1配合事件与 RunJS// On File Loaded 事件处理器Run Query 或 RunJS // 将文件写入 ToolJet Database {{data:pdf;base64, components.filepicker1.file[0].base64Data}} // 需要清空时 await components.filepicker1.clearFiles();E2E 测试中对clearFiles动作的验证可见 csa 测试流程为对filepicker1执行 “Clear Files” 后断言文件区内容被清空可作为该 CSA 行为的参考依据。小结File Picker 是 ToolJet 中“上传 → 校验 → 解析 → 暴露变量”闭环完整的文件组件属性层覆盖说明文字、拖拽/选择开关、多文件与数量上下限、MIME 类型与大小上下限事件层提供 Selected/Loaded/Deselected 三个回调CSA 层支持清空、重命名、可见性、加载与禁用控制变量层提供file数组含 base64、解析数据、路径等与fileSize、isValid等辅助变量解析层内置 CSV/TSV/xls/xlsx/JSON 的自动识别与按类型解析。文档中所有字段与 filepicker 元数据、useFilePicker Hook 及 文件解析工具 的源码实现一一对应可直接用于开发内部工具中的文件上传、表单附件与数据导入场景。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考