langgenius / dify

Dify is an open-source LLM app development platform. Dify's intuitive interface combines AI workflow, RAG pipeline, agent capabilities, model management, observability features and more, letting you quickly go from prototype to production.
https://dify.ai
Other
53.55k stars 7.84k forks source link

[Question] Is it possible to upload files in a chat channel? #2501

Closed luozhouyang closed 9 months ago

luozhouyang commented 9 months ago

Self Checks

Provide a description of the help you need

I want to create a agent that can read files uploaded by user in a chat channel, but I do not see any file uploading controlls in dify web ui.

dosubot[bot] commented 9 months ago

🤖

Hey there @luozhouyang! Great to see you around again. How's everything going?

Based on the information you provided and the context from the repository, it seems that the ability to upload files in a chat channel using the dify web UI is indeed possible. The repository contains a component called ChatImageUploader which is used for uploading images in a chat channel.

Here is the relevant code:

const ChatImageUploader: FC<ChatImageUploaderProps> = ({
  settings,
  onUpload,
  disabled,
}) => {
  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!}
    />
  )
}

export default ChatImageUploader

This component takes in three props: settings, onUpload, and disabled. The settings prop is used to configure the uploader, including the transfer methods and the image file size limit. The onUpload prop is a function that is called when an image file is uploaded. The disabled prop is a boolean that determines whether the uploader is disabled or not.

If the only transfer method is local_file, the UploadOnlyFromLocal component is used. Otherwise, the UploaderButton component is used. Both of these components use the Uploader component to handle the actual uploading of the image file.

You can find this component in the web/app/components/base/image-uploader/chat-image-uploader.tsx file in the repository.

However, it's important to note that this component is specifically for uploading images. If you need to upload other types of files, you may need to create a similar component that handles those file types.

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

Sources

#### 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.
crazywoola commented 9 months ago

Close as duplicated. Please refer the sources above 👆. We will do this after the agent workflow.