Bug: Can't preview Image From File Dropzone/Button

💬 App Building
,
1
  1. My goal: I want to preview an image using File Dropzone & Image components.
  2. Issue: The image shows as broken.
  3. Steps I've taken: Add a fileDropzone component and an image. Select a file in the dropzone. Set the Image source to JS, and set the file object as: {{ fileDropzone1.value[0] }}

This used to work, as it was set up for a previous project months ago, but now it’s just displaying a broken image. See screenshot.

image
image1794×716 60.5 KB

Thanks!

3

You could use the URL “Image source” with a JS expression

{{
  fileDropzone1.value?.[0]?.base64Data
    ? `data:${fileDropzone1.value[0].type || 'image/jpeg'};base64,${fileDropzone1.value[0].base64Data}`
    : ''
}}

https://mryurii.retool.com/apps/69d7c26c-2630-11f1-b4e5-43444769bfff