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:
- A JS query that loops through the files in the file picker and triggers the 2nd query.
- 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] }} |
Updated 21 days ago