Upload multiple files to Google Cloud Store or Amazon S3

Learn how to upload files with Google Cloud Store or Amazon S3.

Let's say we have a File Input component with the Selection type option set to 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] }}