Retool storage image in collection list

Mobile
1

For the option upload file to retool storage in the image input, being able to determine the file name for the upload would be great. Right now, I don't really know how to reference the images, for collections in example.

2

Nevermind, I just found out that the storage ID is returned when enabling upload in the imageinput.

Overall the images seem so be loading very slow in components. And are not shown in mobile image components at all. (Only showing white)

When storing the storage id as a string in a database field, and referencing it as {{ item.image }} for example, images are not displayed in the collection list.

3

What's the size of the images that you're trying to load? We're working on improving query performance at the moment.

Collection view doesn't yet support file storage natively, so you'd have to create a retool storage query and create a URI eg. data:image/png;base64,{{imageQuery.data.base64Data}}

4

Thanks for the reply, this is actually working. But with just a bit over 20 base64 images, it takes 2-3 minutes to load my database card collection. I'm planning to use more than 200 images, so this is not a suitable solution.
Are you planning on enabling retool storage as a source for card collections?

Best Finn

5

I think it would best, if Retool storage images were accessible by URL, so you can just store the url in a Database column "image" and set the collection media source to {{ item.image }}

1 Like
6

For the 20 images, are you fetching these in parallel? How large are individual images here?

Do you plan to display or fetch 200 images in one go, or is this something you'd paginate over?

We're working on adding URL support. We expect to have this out within 2 months. We're not planning to add any new Retool Storage integrations for components (including card collections) since URL will solve this for all components.

7

Thanks for the update! :slight_smile:
Really looking forward to the URL update.

Right now. I’m selecting all database entries, each containing one to two images, each around 300-400 KB (Compressed Image Input)

I haven’t thought about pageination yet. Do you think this could handle the problem. Or will it still fetch all entries like my query states?

8

Unfortunately, pageination also does not change the runtime.

9

Could you share more about how you are loading these images? I am curious if you tried loading these asynchronously by triggering the storage query for all images from a js query, and then performing a Promise.all (like this post). Curious how the timeline view in debugging looks for you i.e. are the image fetches performed concurrently? Separately, is there a specific image that is larger that perhaps is the rate determining step?

Note that URL support won't solve the performance issue. It will only make it more convenient to pass URLs to fetch images instead of needing to create URIs with base64Data in your application.

Separately, when you say you will load 200 images later - is this all in one card collection view, or something that you would want to paginate on? If you're loading 400kb * 200 images = 80Mb of images, that feels like a lot of data to block loading on a mobile application. Could you also share more about what you tried when you said pageination also does not change the runtime?

10

Any update on URLs?

11

Yes. We expect it to be out 2 weeks from today.

1 Like
12

Ran into this issue as well. Here's how I got Retool Storage images in CollectionView with Image urls:
image

I inserted each image_url to my db by using {{imageInput1.files[0].retoolStorageId}}

1 Like