Upload images to S3 from Mobile Input

Mobile
,
1

Hey! I'm trying to upload images to an s3 bucket. Whenever I test the script in the computer, it works fine and I can retrieve the image. However, when I try to upload them from mobile, I will get the base64 string representation inside the s3 instead of the actual image.

I'm not being able to read logs from mobile either, so debugging is super hard. Any help with this issue would be greatly apreciated!

2

Hey @svammo,

Can you share how your "S3 content-type" looks like ?

Here is some example of using base64 and file uri.

Base64:
Screenshot 2024-12-10 at 2.33.13 PM

File uri:
Screenshot 2024-12-10 at 2.32.42 PM

3

Having the same problem and this is very frustrating.

My content-type is either image/jpeg or image/png depending on whether the image is taken on the compuer (in browser, testing) or on the phone.

I am sending the proper base64 encoded string as the data and on the computer everything works fine. This is using the imageInput component and it works whether its a camera photo or an image uploaded to the component.

On mobile, the upload is created, the metadata for the file shows jpg or png but the base64 string comes up instead of an image. For example:

image
image1536×908 247 KB

This is a big problem for my company that requires a fast solution by retool.

Thank you for your prompt attention!

4

Actually, I do have some additional findings:

  1. On mobile, when uploading, the content-type is being stripped out and not shown - we are getting "" as content-type in Metadata on S3.
  2. Even though the filename is properly stored as a .jpg, when you download the file from the S3 console, it downloads as a .txt file.
  3. I did an object copy on the file and replaced the metadata with content-type image/jpeg and when I download, I do now get a .jpg file but it does not function as an image file.

All of these problems do not exist when running the same code on the computer.

5

I can work around the problem by passing the data to a workflow and using the S3 uploader from there. It works fine on mobile but still think we need to get a fix or explanation as to what is happening on the mobile side directly.

Thanks

1 Like
6

So, I was using image/jpeg or image/png, but I changed it to binary and it worked. However, I was passing it via a jsquery in order to upload multiple inputs sequentially. This left me with the problem that the first input was uploaded correctly, but the second input wasn't uploaded to s3, even though I used await in my function.

Also, I was uploading a video, which was also smooth using the desktop editor, but had to revert to saving the video to the retool storage, as via mobile the video wouldn't upload either

1 Like
7

Hi folks,
Thanks so much for sharing what you've tried & potential workarounds! This looks like a Retool bug; I will follow up when we have a fix

1 Like
8

Hello all, we found a solution that seems working with min.IO S3 API.
1- add a component Image input
2- create a JS in order to convert To Base64, call the JS ConvertToBase64 or whatever you want

return utils.getDataByObjectURL(photo_capture.value[0])
.then(base64Data => {
return base64Data.split(',')[1];
});

3- Create a ressource query to your S3 API called upload_S3
Action type : Upload Data
Bucket name : your_bucket_name
S3 Content-Type : Binary
Upload file name : your_filename.jpg
Upload Data : {{ ConvertToBase64.data }}
4- create a JS script called script_S3 to orchestrate the 2 others
await ConvertToBase64.trigger();
await upload_S3.trigger();

I hope this can help, my context is
Retool Self Hosted v3.75.21
S3 Storage min.IO self hosted
Phone : Samsung S25 Ultra

Big up to David my ass kicking associate that found this solution :wink:

1 Like