Directly create app with flow can not use image upload function

[lx1054331851]

Self Checks

• This is only for bug report, if you would like to ask a quesion, please head to Discussions.
• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• Pleas do not modify this template :) and fill in all the required fields.

Dify version

0.6.0-fix

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

showed as above image, the llm just not get any image , and the app was created directly with chatflow

But if i create a basic app and convert to chatflow, the image upload function can be used and the llm can read the image

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

[dosubot]

Based on your description, it seems like the issue might be related to how the VisionSettings are being passed and utilized within the ChatImageUploader component when creating an app directly using the Chatflow option.

The ChatImageUploader component decides which upload component to render based on the settings.transfer_methods array. If the array contains only one method, and that method is TransferMethod.local_file, it renders the UploadOnlyFromLocal component. Otherwise, it renders the UploaderButton component, which includes both the option to upload from a local file and to input an image link.

const onlyUploadLocal
  = settings.transfer_methods.length === 1
  && settings.transfer_methods[0] === TransferMethod.local_file

if (onlyUploadLocal) {
  return (
    <UploadOnlyFromLocal
      onUpload={onUpload}
      disabled={disabled}
      limit={+settings.image_file_size_limit!}
    />
  )
}

return (
  <UploaderButton
    methods={settings.transfer_methods}
    onUpload={onUpload}
    disabled={disabled}
    limit={+settings.image_file_size_limit!}
  />
)

The issue might arise if the settings object, particularly the transfer_methods array, is not correctly initialized or passed to the ChatImageUploader component when creating an app directly using the Chatflow option. This could lead to the component not rendering the expected uploader interface or not functioning as intended due to missing or incorrect configuration.

To resolve this issue, ensure that the VisionSettings or equivalent configuration passed to the ChatImageUploader component is correctly set up when creating an app through the Chatflow option. This includes verifying that the transfer_methods array contains the correct methods (e.g., TransferMethod.local_file) and that any other required settings (like image_file_size_limit) are appropriately initialized.

You can find more details about this in the ChatImageUploader component in the Dify repository.

The VisionSettings object is initialized and passed to the ChatImageUploader component as part of the ChatImageUploaderProps. This is evident from the type definition of ChatImageUploaderProps and the usage within the ChatImageUploader component itself.

type ChatImageUploaderProps = {
  settings: VisionSettings
  onUpload: (imageFile: ImageFile) => void
  disabled?: boolean
}

In the ChatImageUploader component, the settings prop is of type VisionSettings, which is then used within the component to determine the behavior of the uploader based on the transfer_methods and image_file_size_limit properties of the VisionSettings object.

const ChatImageUploader: FC<ChatImageUploaderProps> = ({
  settings,
  onUpload,
  disabled,
}) => {
  // Logic to determine if only local upload is allowed
  const onlyUploadLocal
    = settings.transfer_methods.length === 1
    && settings.transfer_methods[0] === TransferMethod.local_file

  // Conditional rendering based on the settings
  if (onlyUploadLocal) {
    return (
      <UploadOnlyFromLocal
        onUpload={onUpload}
        disabled={disabled}
        limit={+settings.image_file_size_limit!}
      />
    )
  }

  return (
    <UploaderButton
      methods={settings.transfer_methods}
      onUpload={onUpload}
      disabled={disabled}
      limit={+settings.image_file_size_limit!}
    />
  )
}

This demonstrates how the VisionSettings object is passed to the ChatImageUploader component through its props, specifically the settings prop, and then utilized within the component to configure its behavior.

The VisionSettings object is initialized with the following properties based on the provided TypeScript interface:

• enabled: A boolean indicating if the vision feature is enabled.
• number_limits: A number indicating the limit on the number of images.
• detail: A value of the Resolution enum, indicating the resolution detail of images, which can be either low or high.
• transfer_methods: An array of TransferMethod enum values, indicating the allowed methods for transferring images. Possible values include all, local_file, and remote_url.
• image_file_size_limit: An optional property that can be either a number or a string, indicating the size limit for image files.

Example of initializing a VisionSettings object:

const visionSettings: VisionSettings = {
  enabled: true,
  number_limits: 5,
  detail: Resolution.high,
  transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
  image_file_size_limit: "10MB" // This can also be a number, depending on the requirements
};

You can find more details about this in the app.ts file in the Dify repository.

I hope this helps! If you have any other questions or need further clarification, feel free to ask.

Sources

• web/app/components/base/image-uploader/chat-image-uploader.tsx
• web/types/app.ts

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[iamjoel]

Fixed with #3225