How to capture file data inside of Attachment Button?

[Aiman1017]

Hi everyone and @supersnager Thank you for this amazing package.

I try to implement a file attachment data using the AttachmentButton Component. I was wondering how can I combine the file data into the message data that was bind to the MessageInput Component?

The sample code as below:

`import React, { useState, useRef, useEffect } from 'react'; import { ChatContainer, ConversationHeader, MessageList, MessageInput, Message, AttachmentButton, SendButton } from '@chatscope/chat-ui-kit-react';

function ChatPage() { const inputRef = useRef(); const fileRef = useRef(null); const [messageInput, setMessageInput] = useState(''); const [messages, setMessages] = useState([]); const [selectedFile, setSelectedFile] = useState('');

const handleSend = message => {
    setMessages([{
        message,
        selectedFile,
        direction: 'outgoing'
    }]);
    setMessageInput("");
    inputRef.current.focus();
};

const onFileUpload = () => {

    // Create an object of formData
    const formData = new FormData();

    // Update the formData object
    formData.append(
        "myFile",
        selectedFile,
        selectedFile.name
    );

    // Details of the uploaded file
    console.log(selectedFile);

    // Request made to the backend api
    // Send formData object
    // axios.post("api/uploadfile", formData);
};

useEffect(() => {
    const theMessageList = () => {
        // Execute the API here
    }
    theMessageList()
}, [messages])

return (
    <div style={{ height: "100vh" }}>
        <ChatContainer>
            <ConversationHeader>
                <ConversationHeader.Content userName="Unifi Buddy User" />
            </ConversationHeader>
            <MessageList scrollBehavior="smooth">
                {messages.map((m, i) => <Message key={i} model={m} />)}
            </MessageList>
            <div as={MessageInput} style={{
                display: "flex",
                flexDirection: "row",
                borderTop: "1px dashed #d1dbe4"
            }}>
                <MessageInput placeholder="Type message here"
                    onSend={handleSend}
                    onChange={(messagesInput) => setMessageInput(messagesInput)}
                    value={messageInput} ref={inputRef}
                    attachButton={false}
                    sendButton={false}
                    style={{
                        flexGrow: 1,
                        borderTop: 0,
                        flexShrink: "initial",
                        paddingTop: "2.5vh",
                        paddingBottom: "2.5vh"
                    }}
                />
                <SendButton onClick={() => handleSend(messageInput)} disabled={messageInput.length === 0} style={{
                    fontSize: "2em",
                    marginLeft: 0,
                    paddingLeft: "0.2em",
                    paddingRight: "0.2em"
                }} />
                <AttachmentButton
                    style={{
                        fontSize: "2em",
                        paddingLeft: "0.2em",
                        paddingRight: "0.2em"
                    }}
                    onClick={() => fileRef.current.click()} 
                    onSend={onFileUpload}
                />
                <input type='file' id='file' ref={fileRef} style={{display: 'none'}}/>
            </div>
        </ChatContainer>
    </div>
)

}

export default ChatPage`

[supersnager]

Hey @Aiman1017 Thank you for your question. Please explain what you mean by asking:

how can I combine the file data into the message data that was bind to the MessageInput Component?

What exactly do you want to do?

[Aiman1017]

Hi @supersnager,

Basically I want to include attachment function inside the ChatContainer. And I was wondering how to handle that part. Like after I have click the attachment and then immediately push it into the chat or when I select the attachment will it be in the MessageInput first something like that.

[noor-ul-amin0]

Hi @supersnager,

Basically I want to include attachment function inside the ChatContainer. And I was wondering how to handle that part. Like after I have click the attachment and then immediately push it into the chat or when I select the attachment will it be in the MessageInput first something like that.

@Aiman1017 if you mean how to add multimedia/attachments in the MessageList then i have the same question, i m also wondering how can we show multimedia/attachments in the MessageList as we do simple text messages.

[Aiman1017]

@noorarman Yes your statement is correct.

[olivershen-wow]

Hi guys, any update on this thread? I'm facing same question as well. Currently I use custom type of message to introduce a custom HTML piece into the message for rendering, wondering if there's any better solution for this scenario?