Display non-public Images from S3 inside Listview

Hello,

I'm trying to show images from a S3 Bucket in a listview and followed the detailed guide from here: Rendering s3 image in list view - #2 by max_wiederholt

However, that guide only works if the URL to the s3 objects is public.

Our challenge is that we can not make the files public and hence need a step in between to either

  1. get a presigned URL for a given Item in our Listview and then get the file and put it in the URL option of the image object inside the listview item

or

  1. get the file using the s3 component and provide bucket and key and put the result

The question is, how can we render one of above functions dynamically when the listview is being built? The path to the image is stored in a database and available in the listview item.

This is the datasource example, whereas the yellow markup is the path to the s3-file (we prepend the full path via a variable and store only the filename and subfolder, it works). One Item can have 1 or more image objects.

So we have two nested listview objects, first one for the items and then inside the image objects.

The gap i have now is what do i need to put into the source of the image object to get the file from s3 and render the object, given the following example:

Any hints and help is greatly appreciated, thanks!

@joeBumbaca : Would you please elaborate a litte bit more on how to achieve this given your reponse sounds exactly what we need: Rendering s3 image in list view - #4 by joeBumbaca

3 Likes

Hey @whynot! Thanks for reaching out. At a high level, you seem to have the right idea of what needs to be done. It's just a matter of figuring out how to perform certain actions and then putting it all together.

Let's start by looking at how to fetch a signed URL for a given object. There is a built-in option for this when configuring a S3 query in the app editor:

Our docs talk a little bit about how to use this particular action and give an example of what the options object should look like.

After verifying that the above works, you just need to insert an additional step between querying your original database and passing the result into the listView. I'd recommend writing a separate JS query that you trigger as a success handler to the original query:

I hope that gives you an idea of how to proceed! Let me know if you have any specific questions about this implementation.