Image upload component returns blob or file?

Mobile
1

I’m using the image upload component for mobile for the first time. When I upload an image in the editor it returns a blob. But when I upload an image using the app on an iPhone I get a different result: file://

I want to save the image in the retool database and also use the link directly in the app as a preview. I thought this would be simple. Anyone know which steps I’m missing? The blob can be used as the source for an image component. I can also save it in the database. But when I try to do this with iOS I got no clue what to do with the file:// uri.

1 Like
2

Can you try this? Object URLs from Image Input Component - #3 by bca

Official docs are here

3

Yes, that works.

I save the base64 to the database. But is there a better way? Has retool a cloud storage so that it can be cached?

4

Not yet, but stay tuned! We know object storage like S3 is a super common use case and we're working on making it easier.

2 Likes
7

Any news on the s3 storage? Would be awesome if we had simple components for multi file/image upload + storage.

I’ve got multiple app ideas that need s3 instead of blob in database. Can’t wait to use it but I’ll have to :stuck_out_tongue_closed_eyes:

8

Hi @BobandBill, thanks for checking in! Looks like this is still in the works currently

9

Hi Bob trying to do something similar, are yuu succesfully storing the image as base 64 in the retool database? , would you mind telling me how you did this please.

10

Hi, welcome to community.
You should use File button or File input to upload the file.
and there two component will parse files to base64, you read the component base64 value, and save it to retool database
here is docs

11

thanks for the reply, sorry i should have been clearer , this is on the retool mobile

we are succesfully using capture image and it writes back to the retool db as a blob file , how do i then get to view this in the mobile app and the web app as an image.

12

You'll need to convert the image data to a base64 string using the getDataByObjectURL API when you write it to your DB. Then when you read it back you can just pass that data directly to your Image component.

1 Like