Transparent PNG Logo Uploads Result in Unwanted Black Background

Self Checks

[X] This is only for bug report, if you would like to ask a question, please head to Discussions.
[X] I have searched for existing issues search for existing issues, including closed ones.
[X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
[X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.8.2

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Prepare a PNG image with a transparent background
Access the WebApp's logo upload feature
Select and upload the transparent PNG file
View the uploaded logo in the WebApp

✔️ Expected Behavior

The logo should display with its transparent background, allowing the underlying page elements to show through.

❌ Actual Behavior

The logo appears surrounded by a black background, replacing the intended transparency.

Hey @uamyangel! 👋 I'm here to help you with any bugs, questions, or contributions you have for the Dify project. Let's work together to solve this issue!

The issue you're experiencing with transparent PNG logos resulting in an unwanted black background could be due to how the image is processed or displayed in the web app. Here are a few areas to investigate and potential solutions:

Image Processing:
- Ensure that the FileService.upload_file method does not alter the transparency of PNG images during the upload process. The method should handle PNG files correctly without converting them to a format that loses transparency.
Frontend Display:
- Check the CSS styles and configurations in the frontend components responsible for displaying the logo. Specifically, ensure that the img element displaying the logo does not have any background styles applied that could cause the black background.
Image Upload Handling:
- Verify that the image upload handling in CustomWebAppBrand component correctly processes and displays PNG images with transparency. The handleChange function should handle the file upload without altering the image's transparency.

Here are the relevant code snippets and files to review:

Image Upload Handling:

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  const file = e.target.files?.[0]

  if (!file)
    return
  if (file.size > 5 * 1024 * 1024) {
    notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerLimit', { size: 5 }) })
    return
  }

  imageUpload({
    file,
    onProgressCallback: (progress) => {
      setUploadProgress(progress)
    },
    onSuccessCallback: (res) => {
      setUploadProgress(100)
      setFileId(res.id)
    },
    onErrorCallback: () => {
      notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerUploadError') })
      setUploadProgress(-1)
    },
  }, false, '/workspaces/custom-config/webapp-logo/upload')
}

^[1]

CSS Styles: Ensure that the img element displaying the logo does not have any background styles that could cause the black background:
```
<img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='ml-2 block w-auto h-5' />
```
^[1]

Image Processing: Verify that the FileService.upload_file method handles PNG files correctly:

IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "webp", "gif", "svg"]
IMAGE_EXTENSIONS.extend([ext.upper() for ext in IMAGE_EXTENSIONS])

# ...

if extension.lower() in IMAGE_EXTENSIONS:
  file_size_limit = dify_config.UPLOAD_IMAGE_FILE_SIZE_LIMIT * 1024 * 1024
else:
  file_size_limit = dify_config.UPLOAD_FILE_SIZE_LIMIT * 1024 * 1024

if file_size > file_size_limit:
  message = f"File size exceeded. {file_size} > {file_size_limit}"
  raise FileTooLargeError(message)

^[2]

By ensuring that the image processing and frontend display correctly handle PNG transparency, you should be able to resolve the issue with the unwanted black background.

To continue talking to Dosu, mention @dosu.

langgenius / dify