Enhancement - Attach Custom Event Listeners to Upload Button

[succinct0274]

Hi @OvidijusParsiunas , is there any way I can add custom event listeners to the component when users upload a file? I noticed that the html input element is not visible in the DOM tree. Thus, I am not able to make a simple trick to add a callback function easily. Meanwhile there is no interface provided to allow me to do so. Can you suggest any ways to achieve that if there is? Thanks in advance.

[OvidijusParsiunas]

Hi @succinct0274. You can use the onNewMessage event to monitor the files that the user has uploaded and sent to the server where the individual file objects contain a ref property with the actual file. Also mentioned at the end of MessageFile description.

Let me know if this works for you. If not, let me know more about your use-case. Thanks.

[succinct0274]

It may not work if using onNewMessage. Actually, my use-case would be uploading files once users have selected files. The send button will then be disabled until those files have been uploaded to the server successfully. This UI behavior is quite similar to the one used by chatgpt4. The onNewMessage callback is only triggered when the message and files are both sent to the server, which is not something I prefer.

[OvidijusParsiunas]

I see, unfortunately Deep Chat doesn't currently support the ability to upload files before sending a message. This would unfortunately require a significant amount of code changes to facilitate, hence I will not pursue it at the moment.

If this is critical for you, you can fork/clone the repo and change the component yourself which is very easy to do. Check the create your own deep chat component section. The area of code you should start looking at will be the import method.

I will be closing this issue, however if you have any further queries feel free to comment below.