diff --git a/packages/frontend/src/components/chat.tsx b/packages/frontend/src/components/chat.tsx index 3bdf5b80..6234a313 100644 --- a/packages/frontend/src/components/chat.tsx +++ b/packages/frontend/src/components/chat.tsx @@ -1,5 +1,5 @@ import { useLibp2pContext } from '@/context/ctx' -import React, { useCallback, useEffect, useState } from 'react' +import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react' import { Message } from '@libp2p/interface-pubsub' import { CHAT_TOPIC } from '@/lib/constants' import { createIcon } from '@download/blockies' @@ -46,6 +46,7 @@ export default function ChatContainer() { const { libp2p } = useLibp2pContext() const { messageHistory, setMessageHistory } = useChatContext(); const [input, setInput] = useState('') + const fileRef = useRef(null); // Effect hook to subscribe to pubsub events and update the message state hook useEffect(() => { @@ -118,6 +119,27 @@ export default function ChatContainer() { [setInput], ) + const handleFileInput = useCallback( + (e: React.ChangeEvent) => { + if (e.target.files) { + const reader = new FileReader(); + reader.readAsArrayBuffer(e.target.files[0]); + reader.onload = (readerEvent) => { + const result = readerEvent.target?.result as ArrayBuffer; + console.log(`READER_RESULT: ${result.byteLength} bytes`); + }; + } + }, + [], + ) + + const handleFileSend = useCallback( + async (_e: React.MouseEvent) => { + fileRef?.current?.click(); + }, + [fileRef], + ) + return (
@@ -164,7 +186,9 @@ export default function ChatContainer() { /> -