I'm trying to show s3 image in list view using query but don't have any idea.
How to do that?
Hi Artem! Thanks for your question.
Here is a set of steps that I followed to display an image hosted on AWS S3 in a Retool list view component. You can review the Retool docs on how to connect to Amazon S3 and S3-compatible services or query S3 data, and AWS S3 getting started docs here.
First, create a S3 bucket at https://s3.console.aws.amazon.com/s3/home, like so:
For simplicity's sake, I've set my S3 demo bucket to publicly visible, which lets me later copy and paste URLs into a Retool database. Setting a bucket to public creates numerous risks, so I recommend you read more about how AWS handles ACLs and CORS here, then determine a way to generate signed URLs to use instead of the public URLs that I used. For further questions on handling privacy for AWS S3 buckets, I recommend an AWS specific forum like reddit.com/r/AWS or Stack Overflow's S3 tag.
For each image you upload to S3, I set them to public by clicking the Actions v button:
After uploading each image to S3, you can click the hyperlink in the file name to get access to the public S3 URL:
I used a Retool PostgreSQL Database on Retool Cloud (learn more here) to store each URL as a string:
After you've stored all the images in S3 and URLs in a database, you can build the front end list view app in Retool's app builder. Start by dragging and dropping a list view into the main window, then remove the first placeholder component list item:
From an empty list view component, drag and drop an image component into the first instance of the list, so that it repeats:
Now that we have a list of empty images, write a query to get a list of all your image URLs:
Select the list view component, and set Data Source to your query:
Finally, select the first image component in the list, and under Content -> Image Source -> URL, fill out the dot notation path to the object containing your URL string, ex. {{getImageURLs.data.url[i]}}. Finally, you can click and drag to resize your list view, to see all the images in the list.
I hope that helps!
Hi @max_wiederholt , Great Answer. What steps needs to be followed when the url is not supposed to be public?
Hey @khatanaashish! If the image url isn't public then you would need to use a signed url to get the image. You can generate a signed url for a GET request to the image and then use that url instead of the public one.