Retool Storage BLOBs and way files are stored and called

App Building
1

Continuing the discussion from Show image from retool storage:

Apologies in advance for the dumb question.
Seems trivial yet I miserably fail.

Setting: I'm trying Retool internal storage for user uploaded images, but hitting a brick wall trying to wrap my mind around these BLOBs and way files are stored and called.

Goal: Populate a list with images, stored in Retool Storage. And being populated with a simple query that stores CameraUpload.value strings.

image
image1274×998 193 KB

image
image1380×684 151 KB

2

Hello @Scottsky

I think the issue is with the URLs being stored with the "blob:" prefix. To fix this, you can use a transform results in your query to remove the "blob:" prefix.

1. Fetch Image URLs with a Query:

SELECT * FROM mangrove_survey ORDER BY id;

2. Add this to the transform results:

return data.map(item => {
  if (item.photo_url.startsWith("blob:")) {
    item.photo_url = item.photo_url.slice(5);
  }
  return item;
});

3. Add this to the transform results:

Bind the cleaned URLs to an Image component inside a List component:
{{item.photo_url}}

This should help you display the images correctly without the "blob:" prefix issue.
Let me know if you have any questions!

1 Like
3

Thank you this works.

I dobbed my approach to be not the most efficient, revealing another isuue with inconsistency between blob:https://****************/014bfebe-9fd2-44a0-a81a-0fcbfd034a55 saved from web and file:///var/mobile/Containers/Data/Application/C4A86156-BC4D-4164-9220-4B3CF1D35F00/Documents/cachedImages/B2C46473-ADAF-4533-8FDA-432D887D7180.jpg saved from mobile devises.

Ended up adding retool_storage_id to the table, and use this in expressions like: https://***********.retool.com/api/file/{{getMangroveSurveyDataReverse.data.retool_storage_id[selected_point_id.value]}}