ToolJet 实战用可视化组件在 AWS S3 上构建文件上传与下载应用【免费下载链接】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 官方 How-To 文档docs/versioned_docs/version-3.0.0-LTS/how-to/upload-files-aws.md整理而成完整演示如何不写一行后端代码仅用 ToolJet 画布上的 Dropdown、Table、Text Input、File picker 与 Button 五个组件配合四个查询快速搭建一个可浏览、可上传、可生成签名下载链接的 AWS S3 文件管理界面。读完本文你将掌握 S3 数据源接入、组件与查询之间的动态数据绑定{{queries...}}与{{components...}}表达式以及文件二进制数据的 base64 上传链路并理解其背后的插件级实现原理。前置准备为 ToolJet 接入 AWS S3 数据源在开始搭建 UI 之前必须先完成 AWS S3 数据源的配置。完整的接入说明见 S3 数据源文档这里提炼关键信息入口在查询面板点击 Add new Data source按钮或从 ToolJet 仪表盘进入Data Sources页面添加。三种认证方式对应插件源码 plugins/packages/s3/lib/index.ts 中的getConnection实现认证方式需要提供的参数底层实现IAM Access KeysRegion、Access key、Secret key静态密钥直接构造S3ClientAWS Instance Credentials无需密钥勾选后使用通过fromInstanceMetadata从 EC2/ECS 元数据服务获取临时凭证AWS ARN RoleRegion、Role ARN通过 STS 的AssumeRoleCommand换取临时凭证官方建议为 ToolJet 创建一个独立的 IAM 用户以便精确控制其访问级别避免使用高权限的根账号密钥。数据源添加完成后在查询管理器底部面板点击 Add选择Amazon AWS S3数据源再从操作下拉框选择所需操作并填写参数即可通过Preview预览输出或Run触发查询。搭建界面五个组件各司其职整个上传/下载界面的核心由以下组件构成每个组件承担一个明确的职责组件用途Dropdown用于选择 S3 存储桶Table列出 Dropdown 中选中桶内的所有对象Text Input获取待上传文件的目标路径File picker选择要上传的本地文件Button触发上传查询配置查询四个查询串联完整流程我们总共会创建 4 个查询它们共同覆盖「选桶 → 列对象 → 生成下载链接 → 上传文件」的完整闭环getBuckets— 获取所有桶的列表listObjects— 列出选中桶内的对象uploadToS3— 将文件上传到指定桶download— 为指定对象生成签名下载 URLgetBuckets拉取桶列表并填充下拉框新建查询选择 AWS S3 数据源操作选择List buckets将查询命名为getBuckets并保存接着编辑Dropdown组件的属性Label设置为BucketOption values设置为{{queries.getBuckets.data.Buckets.map(bucket bucket[Name])}}—— 查询返回的数据是对象数组因此需要用map提取出每个桶的Name字段Option label同样设置为{{queries.getBuckets.data.Buckets.map(bucket bucket[Name])}}使显示的标签与选项值一致最后为 Dropdown 添加事件处理器在On select选项被选中事件上触发Run Query选择运行listObjects查询实现「换桶即刷新列表」的联动效果。listObjects列出选中桶内的对象新建查询操作选择List objects in a bucket在Bucket字段中输入{{components.dropdown1.value}}—— 该表达式会动态读取 Dropdown 当前选中的值无需写死桶名。然后编辑Table组件的属性Table data{{queries.listObjects.data[Contents]}}添加列Add Columns列名Column Name对应 KeyKeyKeyLast ModifiedLastModifiedSizeSize添加操作按钮Action button按钮文本设为Copy signed URL为其On Click事件添加Copy to clipboard动作文本字段填入{{queries.download.data.url}}—— 这样点击按钮即可把下方将要创建的download查询生成的签名 URL 复制到剪贴板。从插件实现看listObjects底层调用的是 AWS SDK 的ListObjectsV2Command见 plugins/packages/s3/lib/operations.ts查询参数会透传Prefix、MaxKeys、StartAfterOffset和ContinuationToken。其中MaxKeys默认值为1000见 plugins/packages/s3/lib/operations.json 的defaults字段当桶内对象超过限制时返回结果中会携带Next Continuation Token可用于分页拉取下一批对象。download为表格行生成签名下载 URL新建查询操作选择Signed URL for downloadBucket{{components.dropdown1.value}}Key{{components.table1.selectedRow.Key}}—— 动态读取表格当前选中行的Key值再回到Table组件的属性为其添加事件处理器在Row clicked行点击事件上运行download查询。这样每次点击表格中的某一行就会为对应的对象生成一个签名 URL。关于签名 URL 的时效性插件实现中有明确的默认值getSignedUrl(..., { expiresIn: options.expiresIn || 3600 })见 operations.ts即默认3600 秒1 小时过期操作面板中的Expires in参数初始值也对应为3600。你可以按需调整该值控制链接的有效期。uploadToS3上传文件到指定桶新建查询操作选择Upload object在对应字段中填入以下绑定表达式字段绑定表达式说明Bucket{{components.dropdown1.value}}上传到当前选中的桶Key{{ components.textinput1.value / components.filepicker1.file[0].name}}由文本输入框的路径与文件原始文件名拼接出对象键Content type{{components.filepicker1.file[0].type}}透传文件的 MIME 类型Upload data{{components.filepicker1.file[0].base64Data}}文件的 base64 编码内容Encodingbase64指定上传数据的编码方式这些表达式所依赖的file[0].name、file[0].type、file[0].base64Data字段正是 File picker 组件对外暴露的文件对象属性。查看前端实现 frontend/src/AppBuilder/Widgets/FilePicker/hooks/useFilePicker.js可以看到组件在文件被选中后通过FileReader同时读取文本内容与 DataURL再从中剥离出base64DatareadFileAsDataURLResult.split(,)[1]连同name、type、size等元数据一起暴露给查询层使用。而在插件侧uploadObject的实现operations.ts会执行Buffer.from(data, encoding)将 base64 字符串还原为二进制内容再通过PutObjectCommand连同ContentType一起写入 S3这就是「Encoding 填base64」的原因——它告诉插件上传数据是 base64 编码需要解码后再上传。配置 File Picker 的接受类型与数量点击组件手柄编辑 File picker 属性Accept file types设置为{{application/pdf}}则只允许选择 PDF 文件设置为{{image/*}}则只允许选择图片文件若希望接受任意类型的文件将该值留空即可。文件类型必须是符合 input 元素规范的合法 [MIME 类型]如application/pdf、image/png、text/plain等或合法的文件扩展名。前端实现useFilePicker.js会把逗号分隔的类型字符串解析为 react-dropzone 的accept对象当类型为空时accept置空即不限制任何类型。Max file count设置为{{1}}因为本教程每次只上传 1 个文件前端默认值为 2单个文件大小上限默认 50 MB见 useFilePicker.js可按需调整。设置完成后在 File picker 中选中一个 PDF 或图片文件并保持挂载状态。上传成功后自动刷新列表最后一步打开uploadToS3查询的Advanced选项卡添加一个在查询成功后运行的Run Query事件目标为listObjects查询。这样每次文件上传完成后表格都会自动重新拉取对象列表立即展示新上传的文件。源码视角S3 插件的操作分发与连接逻辑上述四个查询的操作在插件源码中都有清晰对应plugins/packages/s3/lib/operations.ts教程中的查询界面上的操作底层 AWS SDK 命令getBucketsList bucketsListBucketsCommandlistObjectsList objects in a bucketListObjectsV2CommanddownloadSigned URL for downloadGetObjectCommandgetSignedUrluploadToS3Upload objectPutObjectCommand插件入口 plugins/packages/s3/lib/index.ts 的run方法会根据queryOptions.operation分发到对应实现并统一把结果包装为{ status: ok, data: result }。值得注意的细节是allowDynamicConnectionParameters开关默认开启当它开启时查询中的Bucket参数会覆盖数据源级的默认桶名queryOptions.bucket || sourceOptions.bucket_name这正是本教程允许每个查询通过{{components.dropdown1.value}}动态指定桶名的底层原因。所有操作参数字段标签、类型、占位符、初始值都定义在 plugins/packages/s3/lib/operations.json 中例如signed_url_for_get的expiresIn初始值为3600、upload_object的encoding占位符为utf8。如果你想了解插件的行为边界与测试方式仓库还提供了测试脚手架 plugins/packages/s3/tests/s3.test.js。总结通过本教程你已经在 ToolJet 中完成了一个完整的 AWS S3 文件管理应用浏览Dropdown 绑定getBuckets结果列出所有桶Table 绑定listObjects结果展示对象列表下载Table 行点击触发download查询生成签名 URL行内按钮一键复制到剪贴板上传File picker 提供文件元数据与 base64 内容uploadToS3查询完成写入上传成功后自动刷新列表。整个过程中没有编写任何后端代码全部依赖 ToolJet 的查询表达式与组件事件联动。掌握这套「数据源查询 组件动态绑定 事件链」的组合方式后你可以举一反三例如将Signed URL for upload操作与 File picker 配合实现直传、利用Prefix/Offset参数实现对象搜索与分页或基于同样的模式把对象存储换成 GCS、MinIO 等兼容服务ToolJet 同样支持通过自定义端点连接 S3 兼容存储。对应的数据源参数与操作说明可随时回到 S3 数据源文档 查阅。【免费下载链接】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 实战：用可视化组件在 AWS S3 上构建文件上传与下载应用
ToolJet 实战用可视化组件在 AWS S3 上构建文件上传与下载应用【免费下载链接】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 官方 How-To 文档docs/versioned_docs/version-3.0.0-LTS/how-to/upload-files-aws.md整理而成完整演示如何不写一行后端代码仅用 ToolJet 画布上的 Dropdown、Table、Text Input、File picker 与 Button 五个组件配合四个查询快速搭建一个可浏览、可上传、可生成签名下载链接的 AWS S3 文件管理界面。读完本文你将掌握 S3 数据源接入、组件与查询之间的动态数据绑定{{queries...}}与{{components...}}表达式以及文件二进制数据的 base64 上传链路并理解其背后的插件级实现原理。前置准备为 ToolJet 接入 AWS S3 数据源在开始搭建 UI 之前必须先完成 AWS S3 数据源的配置。完整的接入说明见 S3 数据源文档这里提炼关键信息入口在查询面板点击 Add new Data source按钮或从 ToolJet 仪表盘进入Data Sources页面添加。三种认证方式对应插件源码 plugins/packages/s3/lib/index.ts 中的getConnection实现认证方式需要提供的参数底层实现IAM Access KeysRegion、Access key、Secret key静态密钥直接构造S3ClientAWS Instance Credentials无需密钥勾选后使用通过fromInstanceMetadata从 EC2/ECS 元数据服务获取临时凭证AWS ARN RoleRegion、Role ARN通过 STS 的AssumeRoleCommand换取临时凭证官方建议为 ToolJet 创建一个独立的 IAM 用户以便精确控制其访问级别避免使用高权限的根账号密钥。数据源添加完成后在查询管理器底部面板点击 Add选择Amazon AWS S3数据源再从操作下拉框选择所需操作并填写参数即可通过Preview预览输出或Run触发查询。搭建界面五个组件各司其职整个上传/下载界面的核心由以下组件构成每个组件承担一个明确的职责组件用途Dropdown用于选择 S3 存储桶Table列出 Dropdown 中选中桶内的所有对象Text Input获取待上传文件的目标路径File picker选择要上传的本地文件Button触发上传查询配置查询四个查询串联完整流程我们总共会创建 4 个查询它们共同覆盖「选桶 → 列对象 → 生成下载链接 → 上传文件」的完整闭环getBuckets— 获取所有桶的列表listObjects— 列出选中桶内的对象uploadToS3— 将文件上传到指定桶download— 为指定对象生成签名下载 URLgetBuckets拉取桶列表并填充下拉框新建查询选择 AWS S3 数据源操作选择List buckets将查询命名为getBuckets并保存接着编辑Dropdown组件的属性Label设置为BucketOption values设置为{{queries.getBuckets.data.Buckets.map(bucket bucket[Name])}}—— 查询返回的数据是对象数组因此需要用map提取出每个桶的Name字段Option label同样设置为{{queries.getBuckets.data.Buckets.map(bucket bucket[Name])}}使显示的标签与选项值一致最后为 Dropdown 添加事件处理器在On select选项被选中事件上触发Run Query选择运行listObjects查询实现「换桶即刷新列表」的联动效果。listObjects列出选中桶内的对象新建查询操作选择List objects in a bucket在Bucket字段中输入{{components.dropdown1.value}}—— 该表达式会动态读取 Dropdown 当前选中的值无需写死桶名。然后编辑Table组件的属性Table data{{queries.listObjects.data[Contents]}}添加列Add Columns列名Column Name对应 KeyKeyKeyLast ModifiedLastModifiedSizeSize添加操作按钮Action button按钮文本设为Copy signed URL为其On Click事件添加Copy to clipboard动作文本字段填入{{queries.download.data.url}}—— 这样点击按钮即可把下方将要创建的download查询生成的签名 URL 复制到剪贴板。从插件实现看listObjects底层调用的是 AWS SDK 的ListObjectsV2Command见 plugins/packages/s3/lib/operations.ts查询参数会透传Prefix、MaxKeys、StartAfterOffset和ContinuationToken。其中MaxKeys默认值为1000见 plugins/packages/s3/lib/operations.json 的defaults字段当桶内对象超过限制时返回结果中会携带Next Continuation Token可用于分页拉取下一批对象。download为表格行生成签名下载 URL新建查询操作选择Signed URL for downloadBucket{{components.dropdown1.value}}Key{{components.table1.selectedRow.Key}}—— 动态读取表格当前选中行的Key值再回到Table组件的属性为其添加事件处理器在Row clicked行点击事件上运行download查询。这样每次点击表格中的某一行就会为对应的对象生成一个签名 URL。关于签名 URL 的时效性插件实现中有明确的默认值getSignedUrl(..., { expiresIn: options.expiresIn || 3600 })见 operations.ts即默认3600 秒1 小时过期操作面板中的Expires in参数初始值也对应为3600。你可以按需调整该值控制链接的有效期。uploadToS3上传文件到指定桶新建查询操作选择Upload object在对应字段中填入以下绑定表达式字段绑定表达式说明Bucket{{components.dropdown1.value}}上传到当前选中的桶Key{{ components.textinput1.value / components.filepicker1.file[0].name}}由文本输入框的路径与文件原始文件名拼接出对象键Content type{{components.filepicker1.file[0].type}}透传文件的 MIME 类型Upload data{{components.filepicker1.file[0].base64Data}}文件的 base64 编码内容Encodingbase64指定上传数据的编码方式这些表达式所依赖的file[0].name、file[0].type、file[0].base64Data字段正是 File picker 组件对外暴露的文件对象属性。查看前端实现 frontend/src/AppBuilder/Widgets/FilePicker/hooks/useFilePicker.js可以看到组件在文件被选中后通过FileReader同时读取文本内容与 DataURL再从中剥离出base64DatareadFileAsDataURLResult.split(,)[1]连同name、type、size等元数据一起暴露给查询层使用。而在插件侧uploadObject的实现operations.ts会执行Buffer.from(data, encoding)将 base64 字符串还原为二进制内容再通过PutObjectCommand连同ContentType一起写入 S3这就是「Encoding 填base64」的原因——它告诉插件上传数据是 base64 编码需要解码后再上传。配置 File Picker 的接受类型与数量点击组件手柄编辑 File picker 属性Accept file types设置为{{application/pdf}}则只允许选择 PDF 文件设置为{{image/*}}则只允许选择图片文件若希望接受任意类型的文件将该值留空即可。文件类型必须是符合 input 元素规范的合法 [MIME 类型]如application/pdf、image/png、text/plain等或合法的文件扩展名。前端实现useFilePicker.js会把逗号分隔的类型字符串解析为 react-dropzone 的accept对象当类型为空时accept置空即不限制任何类型。Max file count设置为{{1}}因为本教程每次只上传 1 个文件前端默认值为 2单个文件大小上限默认 50 MB见 useFilePicker.js可按需调整。设置完成后在 File picker 中选中一个 PDF 或图片文件并保持挂载状态。上传成功后自动刷新列表最后一步打开uploadToS3查询的Advanced选项卡添加一个在查询成功后运行的Run Query事件目标为listObjects查询。这样每次文件上传完成后表格都会自动重新拉取对象列表立即展示新上传的文件。源码视角S3 插件的操作分发与连接逻辑上述四个查询的操作在插件源码中都有清晰对应plugins/packages/s3/lib/operations.ts教程中的查询界面上的操作底层 AWS SDK 命令getBucketsList bucketsListBucketsCommandlistObjectsList objects in a bucketListObjectsV2CommanddownloadSigned URL for downloadGetObjectCommandgetSignedUrluploadToS3Upload objectPutObjectCommand插件入口 plugins/packages/s3/lib/index.ts 的run方法会根据queryOptions.operation分发到对应实现并统一把结果包装为{ status: ok, data: result }。值得注意的细节是allowDynamicConnectionParameters开关默认开启当它开启时查询中的Bucket参数会覆盖数据源级的默认桶名queryOptions.bucket || sourceOptions.bucket_name这正是本教程允许每个查询通过{{components.dropdown1.value}}动态指定桶名的底层原因。所有操作参数字段标签、类型、占位符、初始值都定义在 plugins/packages/s3/lib/operations.json 中例如signed_url_for_get的expiresIn初始值为3600、upload_object的encoding占位符为utf8。如果你想了解插件的行为边界与测试方式仓库还提供了测试脚手架 plugins/packages/s3/tests/s3.test.js。总结通过本教程你已经在 ToolJet 中完成了一个完整的 AWS S3 文件管理应用浏览Dropdown 绑定getBuckets结果列出所有桶Table 绑定listObjects结果展示对象列表下载Table 行点击触发download查询生成签名 URL行内按钮一键复制到剪贴板上传File picker 提供文件元数据与 base64 内容uploadToS3查询完成写入上传成功后自动刷新列表。整个过程中没有编写任何后端代码全部依赖 ToolJet 的查询表达式与组件事件联动。掌握这套「数据源查询 组件动态绑定 事件链」的组合方式后你可以举一反三例如将Signed URL for upload操作与 File picker 配合实现直传、利用Prefix/Offset参数实现对象搜索与分页或基于同样的模式把对象存储换成 GCS、MinIO 等兼容服务ToolJet 同样支持通过自定义端点连接 S3 兼容存储。对应的数据源参数与操作说明可随时回到 S3 数据源文档 查阅。【免费下载链接】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），仅供参考
