Retool Storage BLOBs and way files are stored and called

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.

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 => {
  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:

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

1 Like

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://***********{{[selected_point_id.value]}}