How to upload image into chatbot

[arissaraZ]

Hi,

Is there any way to provide file custom component which select from the gallery?

Example of the custom component will be appreciated.

[FredrikOseberg]

Hello. Sorry, I don't understand the question. What do you mean by custom component that selects from the gallery?

Best, Fredrik

On Wed, Mar 17, 2021 at 6:06 PM arissaraZ @.***> wrote:

Hi,

Is there any way to provide file custom component which select from the gallery?

Example of the custom component will be appreciated.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/FredrikOseberg/react-chatbot-kit/issues/37, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2WIPRUBQID2QOY3GTHYULTEDOHBANCNFSM4ZK7MC5Q .

[arissaraZ]

I mean How to add button for upload image into chat like Facebook Messenger.

[FredrikOseberg]

I mean How to add button for upload image into chat like Facebook Messenger.

If you want to render an image you can use widgets to that from the bot side. Do you have a use case where you want to upload an image as a user?

[arissaraZ]

Use case: When user click on upload image button to select image, then selected image will show on text input (change from placeholder to selected image). And if user confirm image to submit to click on send button. So that image will show in user chat is it possible? and if possible. Can you show me an example? please.

Thanks

[FredrikOseberg]

Use case: When user click on upload image button to select image, then selected image will show on text input (change from placeholder to selected image). And if user confirm image to submit to click on send button. So that image will show in user chat is it possible? and if possible. Can you show me an example? please.

Thanks

Currently, this isn't possible. I'll look into building support for that. What you could do is to build an image widget that displays an image with a chatbot response, but you currently can't upload an image from the user side.

[FredrikOseberg]

Here's a way you can render an image before I improve support for this use case:

First create an image widget:

const ImageWidget = ({ src, alt }) => {
    return <img src={src} alt={`image of ${alt}`}  />
}

Then register it in the config:

const config = {
   state: {
     src: "", 
     alt: "",
   }
   widgets: [
      {
         widgetName: "imageWidget",
         widgetFunc: (props) => <ImageWidget {...props} />,
         mapStateToProps: ["src", "alt"]
      }
   ]
}

In your actionprovider:

const handleImage = (src, alt) => {
     const message = { type: "user", message: "Here's my image:", widget: "imageWidget", id: "some-unique-id" };

     this.setState(prev => ({ ...prev, messages: [...prev.messages, message], src, alt }))
}

That should help you render an image widget.

[arissaraZ]

I really appreciate you, Thank you so much.

[arissaraZ]

Sorry, I need help again. When use type: "user" followed your example, It's can't work but when use this.createChatBotMessag It's work. So Why doesn't work ? please help me for solution.