Upload multiple files through a GCS / S3 resource

Let's say we have a File Input component with the Selection type option set tp Multiple files. We want to upload all the selected files to GCS or AWS S3 through a connected resource.

That's what we'll build in just a few minutes!

You will need to create 2 queries:

  1. A JS query that loops through the files in the file picker and triggers the 2nd query.
  2. An upload query for the GCS/S3 resource. This upload will run for each of the files in the loop.

Create a JS query

  • The JS query loops through the files in the file picker using a for() loop.
  • For each file, the upload query (uploadToS3 in this example) is triggered.
async function go() {
  for (let i = 0; i < fileInput1.value.length; i++) {
    await uploadToS3.trigger({ additionalScope: { i: i } })
  }
}

return go()

Note that for Retool to actually wait to execute the entire async function loop (e.g. resolve the Promise), you'll need to return the function call. If you just call the function, it will work but your onSuccess triggers may act unpredictably.

Create an upload query

In this example, uploadToS3 is a query to the S3 Resource.

The data posted to S3 is listed below:

Data

Value

S3 Action

Upload data

Bucket name

your-bucket-name

Export File Type

Binary

Upload File Name

{{ fileInput1.files[i].name }}

Upload Data

{{ fileInput1.value[i] }}


Did this page help you?