plotly / plotly/dash

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

Open
#2,449 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

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

  • replace the result of pip list | grep dash below
dash                          2.8.1
dash-canvas                   0.1.0
dash-core-components          2.0.0
dash-html-components          2.0.0
dash-table                    5.0.0
dash-uploader                 0.6.0

  • 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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the difference between dcc.Upload with html.Img and the direct Image.open sample.tif case, then inspect the dcc.Upload and html.Img entry points. Compare the behavior with the TIFF upload shown on the Dash upload documentation page; done means TIFF handling is either supported consistently or its limitation and required handling are clearly established.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.