chat input: enable ctrl/cmd+v paste images

daostack · Oct 10, 2023 · b627773 · b627773
1 parent b920331
commit b627773
Showing 1 changed file with 24 additions and 1 deletion.
diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx
@@ -182,6 +182,7 @@ export default function ChatComponent({
   const currentFilesPreview = useSelector(selectFilesPreview());
   const chatContentRef = useRef<ChatContentRef>(null);
   const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []);
+  const chatInputWrapperRef = useRef<HTMLElement>(null);
 
   const [message, setMessage] = useState<TextEditorValue>(
     parseStringToTextEditorValue(),
@@ -323,7 +324,14 @@ export default function ChatComponent({
   );
 
   const uploadFiles = (event: ChangeEvent<HTMLInputElement>) => {
-    const newFilesPreview = Array.from(event.target.files || []).map((file) => {
+    let clipboardfiles: FileList | undefined;
+    if ((event as any).clipboardData.files.length) {
+      clipboardfiles = (event as any).clipboardData.files;
+    }
+
+    const newFilesPreview = Array.from(
+      event.target.files || clipboardfiles || [],
+    ).map((file) => {
       return {
         info: file,
         src: URL.createObjectURL(file),
@@ -583,6 +591,20 @@ export default function ChatComponent({
       return null;
     }
 
+    useEffect(() => {
+      const handlePaste = (event) => {
+        if (event.clipboardData.files.length) {
+          uploadFiles(event);
+        }
+      };
+
+      chatInputWrapperRef.current?.addEventListener("paste", handlePaste);
+
+      return () => {
+        chatInputWrapperRef.current?.removeEventListener("paste", handlePaste);
+      };
+    }, []);
+
     return (
       <>
         <ButtonIcon
@@ -674,6 +696,7 @@ export default function ChatComponent({
         <MessageReply users={users} />
         <ChatFilePreview />
         <div
+          ref={chatInputWrapperRef as any}
           className={classNames(styles.chatInputWrapper, {
             [styles.chatInputWrapperMultiLine]: isMultiLineInput,
           })}