plotly / dash

Data Apps & Dashboards for Python. No JavaScript Required.
https://plotly.com/dash
MIT License
21.58k stars 2.08k forks source link

dcc.Upload doesn't support rendering of tif image files with html.Img #2449

Open matt-sd-watson opened 1 year ago

matt-sd-watson commented 1 year ago

Describe your context Please provide us your environment, so we can easily reproduce the issue.

-  if frontend related, tell us your Browser, Version and OS

    - OS: Ubuntu
    - Browser Chrome
    - Version Version 110.0.5481.177 (Official Build) (64-bit)

**Describe the bug**

I am trying to render .tif image files from `dcc.Upload` using `html.Img` components. The tifs render perfectly fine using a direct path read: 

html.Img(src=Image.open(os.path.join(os.path.dirname(os.path.abspath(file)), "sample.tif")))



but when using dcc.Upload and the base64 string, nothing appears.

**Expected behavior**

i would expect that plotly dash components would be able to render .tif files using the upload feature as the HTML Img components are able to. Is there some sort of additional conversion required, is this a bug, or is support not being offered for this feature?

This lack of image rendering can also be seen here: https://dash.plotly.com/dash-core-components/upload when attempting to upload .tifs, nothing will appear. 
T4rk1n commented 1 year ago

Not sure tif files are supported by browser, chrome don't seem to support it: https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

What does Image.open( returns ?

matt-sd-watson commented 1 year ago

As I had hoped to show in the example above, rendering the tif directly through a Pillow Image opener works and shows the image in Chrome:

html.Img(src=Image.open(os.path.join(os.path.dirname(os.path.abspath(__file__)),
                                                                 "sample.tif")))

However, when trying to access the Image after using dcc.Upload and uploading the same tif file, it doesn't render. Could this be related to the method by which dash converts the file contents into base64-encoded strings?