Retool Mobile Bug - Uploading image to s3 behaves differently in Retool Mobile App

💬 App Building
, , ,
1 
async function uploadBase64Image(base64String, fileName) {
    console.log("File Name:", fileName);
    console.log("Base64 Length:", base64String.length);
  

    // Extract base64 data
    const base64Data = base64String.split(",")[1]?.trim();
    if (!base64Data) {
        console.error("Invalid base64 string!");
        return;
    }

    // Convert Base64 to binary
    const byteCharacters = atob(base64Data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], { type: "image/jpeg" });
const fileObject = new File([blob], fileName, { type: "image/jpeg" });
    console.log("file:",fileObject)
    console.log("Blob Size:", blob.size); // Check if it's still 15B or larger
    // Upload to S3
    const response = await uploadtos3.trigger({
        additionalScope: {
            key: fileName,
            value: blob
        }
    });

    console.log("Upload Response:", JSON.stringify(response));
}

var base64,file;
uploadBase64Image(base64,file)

in s3 upload query, im using either 'image/jpeg' or binary
and image is uploaded fine when im testing with retool mobile via webiste/editor.

But when i try this exactly with Retool Mobile App. the data uploaded into s3 is always 15.0B no matter what.
I mean everything works fine in web app but not in mobile app. SO something might be wrong in mobile app or help me with this,

2

Hi @Elaya_Bharathi I can suggest to use resource query to upload file in mobile and web. You can add a S3 Resource. S3 content-type should be binary and you can upload a file.

test1
test1996×888 68.5 KB

1 Like
3

so this is for fileInput, but the issue with me was 'imageInput'
let me break it down further so you can have idea:
so in retool mobile
whenever a image is picked from imageInput, the type is blob
so in the documentation, they mentioned to convert it into base64 and store which would work. actually it did work.
but also without converting into base64 and directly storing the blob it into 's3' (for example like 'blob:https://myretool.com/dmasm-whatever') also worked.
in my case, i had to convert it into base64 and store it insode local storage and use it later. so i tried converting the base64 again into blob and tried to upload to s3. it actaully worked with no issue at all , I mean perfect. but when i tested the app with Retool Mobile, the file that was getting uploaded to s3 is broken or something but always in sizes of Bytes(like 15 Bytes)

I consoled the blob and base64 sizes ,everything matched but something wrong with upload process from Retool Mobile.
I guess the advantage of string the blob like directly would be s3 url would be like cdn , otherwise when stored with base64, it always downloads . Even tried changing content type, then it says file broken or soemthing.

Yeah solved it by directly uploading base64. but just spent so much time on why Retool app behaved differently from web when working. Let me know . Thanks

4

Hi @Elaya_Bharathi,

Thanks for reaching out. :disappointed: Sorry to hear it took quite a bit of time to debug! I'm glad to hear you already found a path to move forward

I'm wondering if another workaround could have been to store the image input data in localStorage and then do the convert to base64 when you need to upload to s3? It can be tricky to work with such a large base64 value in JS queries

I tested both approaches (storing the base64 in localStorage and storing the image input data in localStorage), and didn't have any issues on my mobile app. It's possible that we fixed a bug here, but I may be missing other details from your set up (for example, what is the timeline between saving to localStorage vs uploading to S3). If you want to investigate further, it would be helpful to get screenshots of the queries, information on the mobile device you're using to test, and any other details on the user flow.