Image Upload on mobile returning null

💬 Mobile
,
1
  1. My goal: Be able to upload images from mobile
  2. Issue: Trying to get mobile to do a pic upload. I have it working on a web app but cannot seem to get anything but a null value. Tried multiple options from the forum and google searches but still nothing but a null value.
  3. Steps I've taken to troubleshoot: Tried all options I can find online
  4. Additional info: (Cloud or Self-hosted, Screenshots)

I have a CRUD action to add the attachment... if I just pass a string it creates the attachment with the string (just to prove the connection was working.

image
image726×470 20.5 KB

The PrepareAttachmentData has undergone many different revisions which means whatever im doing wrong I've done it in every option I've found. Here is the code
/////////////////////////////////////////////////////////////////
async function blobUrlToBase64(url) {
const response = await fetch(url);
const blob = await response.blob();

return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob); // This returns the full data URL (e.g., data:image/png;base64,...)
});
}

const detailRow = selectedItem.value.Id;
const filetype=inputImageDetailLine.files[0].type;
const blobUri = inputImageDetailLine.value[0];

const myBlob = await blobUrlToBase64(blobUri)

return {
ParentId: detailRow,
//Name: file.name || 'photo.jpg',
Name: 'photo2.jpg',
ContentType: filetype || 'image/jpeg',
// Body: blobUri
// Body: blobUrlToBase64(blobUri)
Body: myBlob
};
/////////////////////////////////////////////////////////////////

1 Like
3

It looks like the issue is that inputImageDetailLine.value[0] on mobile is not a real blob URL, so your function always gets null. On mobile, the file input usually gives an actual file object, not a blob URI.

Try reading the file directly:

const file = inputImageDetailLine.files[0];

const reader = new FileReader();
reader.onloadend = () => {
  return {
    ParentId: selectedItem.value.Id,
    Name: file.name || 'photo.jpg',
    ContentType: file.type || 'image/jpeg',
    Body: reader.result
  };
};
reader.readAsDataURL(file);

This works on mobile click here because it reads the real file instead of a null blob URL.

4

Hello @MarkAVickers Welcome to the Retool Community,

I encountered the same issue in Retool Mobile when uploading images to the database. Since Retool returns a blob URL instead of base64, I used the following workaround, which works perfectly:

  1. Use the FileInput component and enable “Upload file to Retool Storage.”

  2. Create a new query for Retool Storage with the action type “Get content of a file.”

  3. Set the File ID to:

    {{ fileInput1.files[0].retoolStorageId }}

  4. Run this query on the onChange event of the FileInput component.

After that, you can access the base64-encoded image in your resource like this:

{{ query5.data.base64Data }}

Screenshot:

image
image1619×884 162 KB

image
image664×502 42.1 KB

5

Thanks. With Darren’s help Im almost there now. The following code works perfectly. The only issue know is that the query is trying to complete before the script does. So it sees null. If I run the script manually, it populates the objects, then the query will work. How to I make sure the script runs before the query? (Already tried an await in the resource body but that didn’t work.)

const file = inputImageDetailLine.value?.[0];
const detailRow = selectedItem.value.Id;
const filetype=inputImageDetailLine.files[0].type;
const blobUri = inputImageDetailLine.value[0];

let base64String = await utils.getDataByObjectURL(blobUri);
if (base64String.includes(',')) {
base64String = base64String.split(',')[1];
}

return {
ParentId: detailRow,
//Name: file.name || 'photo.jpg',
Name: 'photo5.jpg',
ContentType: filetype || 'image/jpeg',
Body: base64String
};

6

Hi @MarkAVickers,

Great to hear that Darren was able to help you almost get this fully sorted!

In terms of getting the script to run before the query, have you tried added a debounce to the query to 'slow it down' so it runs slightly later than the script?

Race conditions like this are tricky since the best solution we have is to chain the query run to the success handler of the script or another event.