Object URLs from Image Input Component

Mobile
,
#1

Hey all - wondering how to use the Image Input component on mobile:
For context-building an inventory management mobile app where sometimes pictures have to be taken and stored.

imageInput1.value[0] returns the object (blob?) url: blob: https://org-name.retool.com/4eee7476-9716-4772-9b82-d00e23ffafb5

I can open this in a new tab and it returns the image, and can also point an image component to it where the image is displayed in the app.

I'm trying to upload an image taken on the mobile app to Supabase storage and from my understanding need the base64encoded data or binary data to do that. I've tried fetch and always get the error "failed to fetch", and an also XMLHttpRequest(), and no luck. Chrome's Dev Tools show "Not allowed to load local resource: blob: ..."

Does anyone have any ideas or tips on how to get the raw image data so I can upload it to storage? Is there a way to get access to the object before the object url is generated?

Apologies if I'm missing something obvious, I'm new to all this..
Thanks in advance!

1 Like
#3

@Ike looks like this is a current bug in the product! Thanks for reporting. We're working on a fix ASAP.

Update: we've shipped a new API to convert Blob or File URIs to base64 strings, utils.getDataByObjectURL. It's an async API (which means you need to await it) and should be useable in JS Queries and "Run script" event handlers.

Use it like this:

// if imageInput1.value[0] is "blob:http://foo.retool.com/7b4f0d00-6f66-4215-b0d8-d09f982b788e":

const base64 = await utils.getDataByObjectURL(imageInput1.value[0])
4 Likes