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