Documentation

Welcome to Retool! We're a fast way to build custom internal software.

You'll find the 5 minute demo, quickstart guide, and documentation for each of our connectors and components here. If you've got any questions -- chat with us on the bottom right!

Get Started    Guides

Upload photos to S3

Build a tool to upload images to S3, and save their URLs to an API.

Let's say we're Amazon, and want to upload some images for our books products. We'll build a tool to upload images to S3, and then save its URL to our API, all in 5 minutes.


If you haven't already, you can create a Retool account to follow along.
Create an account

0. Set up S3 credentials

Before uploading to S3, we'll have to add it as a resource. See S3Upload on instructions. You'll need to create an IAM user, and then edit the CORS settings.

1. Upload images

Let's drag on a S3Uploader from the right hand side, and then choose the right bucket:

Creating a new `S3Uploader`, and configuring it.

Creating a new S3Uploader, and configuring it.

Great! That's it — now let's try uploading a file by clicking on the button. After the file uploads, you should get a success notification. And now, you'll see that the .lastUploadedFileUrl is now a S3 URL:

Great! Let's POST that URL back to our API, so we can persist it in the database.

2. Save the S3 URL, part 1

See the right hand side of the S3Uploader? There's a After Upload callback. Let's click on it, and tell it to make a new query:

Making a new query to call after it uploads.

Making a new query to call after it uploads.

If we just want to persist images, we could just do a POST back to our API, which is pretty easy.

`POST`ing back our image URL.

POSTing back our image URL.

3. Pulling in `Products`

But realistically, we probably want to attach our images to a specific database record, like a Product. To do that, we'll first have to pull in all our items. Let's write a SQL query:

select * from products order by id;

Great! Let's hit "run", and then "save" if it looks good:

After that, let's drag on a Table from the right hand side. It'll be automatically populated with data from your last query (select * from products order by id, in this case).

A table of products.

A table of products.

Great - table of products in. Now let's render the image itself from the image_url in our database. To do that, let's drag in a Text component from the right hand side, then set its value to be an <img> tag:

<img src="{{table1.selectedRow.data.image_url}}" height="300" />
Oh - the memories!

Oh - the memories!

4. Save the S3 URL in our database, part 2

Nice! Now that we have a table of Products, and we can preview each image, we're ready to change the image_url. Let's do a PUT back via our API, like the screenshot below.

Writing a `PUT` to update our `Item`.

Writing a PUT to update our Item.

And now... after it's PUT, we want to refresh our SQL query, so it'll pull in the fresh data (including image_url). So let's add that to the "On success, trigger these queries" section:

Refresh our list of products after we upload the images.

Refresh our list of products after we upload the images.

That's it! Now when we upload an image, it'll call the trigger, which'll PUT back to our API. After that succeeds, it'll reload our SQL query to pull in our products again - this time with the updated image_url.

5. Actually using it

This tool is now production-ready. If you don't want coworkers bugging you about uploading images to S3 + editing the database, just send them the link to this tool! If you give them specific permissions, they won't be able to edit the tool and change the queries - they'll just be able to use the tool you've created. Not bad for a few minutes of work!


Want to build tools on top of S3 yourself?
Create an account


-->