Change the source of an uploaded image dynamically?

💬 Self Hosted Retool
1

Hi all,

I'm wondering whether it isn't possible to change the image of an image component dynamically on runtime?
We are using image components to emphasize the status of certain input forms. Sometimes this status changes and a different image would be necessary.
All images are previously uploaded to Retool's internal database and are related to the images on the GUI during development from the dropdown list of all uploaded images (which is really hard to handle as it is to small to read the entries and so on ...).
There's no possibility here to use Javascript to change the image.
How could it be reached to change the images dynamically?

Thanks and regards
Günter

2

I'm wondering why

Did you store your image as base64 in the db? If so, how about

  1. Have a query triggered by your input change. This query is to dynamically pull the base64 of the image stored in db.
  2. In image component, use JS, and reference the value of the query.
3

Hi,
tahnks a lot for this first answer,
No, I don't store the images in base64. Why should I do this? The images are SVGs and I transfer them to database with the upload possibility for the image component in the GUI:

grafik
grafik1277×597 62.8 KB

When the image has been uploaded, it can be related to the component by means of the dropdown list above the upload pane.
This way the images are stored in Retool's internal database in the table org_image_blobs:
grafik
grafik2403×440 153 KB

I don't know, how this behavior can be changed using base64.
In the image's state you can then find the used mode the SVG is related to the image component, in this case srcType=dbBlobId and dbBlobId= "f9dc...." :
grafik
grafik411×614 29.8 KB

I would expect something like changing the component's dbBlobId dynamically to create a different image in the component.

Regards
Günter

4

The reason you might want to store it as Base64 is that Base64 can be used directly in the image component to render the image.

image
image487×415 23.4 KB

The Retool internal one stores the image you upload as blob. You can actually write a JS / transformer to translate blob to Base64. But I'd rather store them all as Base64 in my self-managed database instead of Retool's internal one because, as far as I'm aware of, Retool doesn't provide a direct interface to manage what's been uploaded thru the image component.

I think the rest is pretty straight forward: a query to dynamically pull the Base64 of the image you're aiming at, then reference the Base64 in the image component, you should be all good to go.