Issue with Image (base64) Display on Retool

When accessing fileInput.data.type via {{ }} interpolation, the MIME type is truncated to image/ - the subtype (e.g. png, jpeg) is missing. The base64 data is correct and the image renders fine when the type is manually corrected in DevTools.

Steps to Reproduce

  1. Add a File Input or Image component that produces a .data object.

  2. Reference the type field via interpolation:

    { type: {{ imageSquaring_url2?.data?.type }} }
    
  3. Observe the rendered value in the DOM - type shows as image/ with no subtype.

  4. Manually edit the value in DOM with DevTools to image/png - image renders correctly.

Expected Behavior
fileComponent.data.type should return the full MIME type, e.g. image/png or image/jpeg.

Actual Behavior
fileComponent.data.type returns image/ - the subtype is stripped, making it impossible to construct a valid data:image/...;base64,... src string programmatically.

2 Likes

Welcome to the community, @Irakli! Thanks for reaching out.

This issue has been raised a few times now and is actually the result of a Chrome bug that shipped in version 146. I expect it will be fixed fairly quickly, but the current workaround within Retool is to manually built a data URL instead of using the JS option.

I hope that helps! Let me know if you have any questions.

1 Like