Dynamically calling RetoolStorage for Image based off {{item}} from RetoolDB

Hey there,

I have created a mobile page, where the user can upload an image, this image is stored via Retool Storage for now. On this page i also have a block for an image to show in the same page.

The top "blue box" is where the image is to be displayed.

My Intended Flow:

  1. User uploads image
    2a. Image stored to Retool Storage
    2b. Image reference information (id etc) stored to RetoolDB
  2. Image displayed (either by refresh or reopening that instance)

In step 3. i am calling the 2b. to pull down 2a.
I am doing this via
image

At this stage, uploading via website has the blob url, and that fine.
But if the user uploads via the mobile app, its a Stainless Steel file:///var/mobile/Containers/Data/Application/....etc. I can extract the jpg id from this.
BUT i cannot get the dynamic reference to work in the image above.

Any thoughts?

The file object url jpg id isn't the fileId from storage. It is a random id used to manage temp files. You should be able to get the file storage id from the upload component state and use this for 2b, and reference using this thereafter

To confirm, filestorageid would be the end part of the .value[0]? From the blob string? - With a web upload
And for a Mobile App Upload it would be the string after file:///var/mobile/Containers/Data/Application/"Tihs one"////

.files.retoolstorageid - found that, will test it
Thanks, himanshu
EDIT

For anyone else reading this.

SOLUTION

Capture image via "dummy" submit button.
you want to get the uploadItem.files[0].retoolstorageID

Then parse that into the Image Source -> Set Dynamically and call the db.

Note that the page wont automatically refresh with the new image on the same page, unless you have something to trigger to do that. (Currently what i will be working on)

1 Like