From a2353409bf3ffaff315599ed1ec3faf6c4f1655d Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 19 Oct 2024 15:53:40 +0300
Subject: [PATCH] web/composer: add support for pasting files

---
 web/src/ui/MessageComposer.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/src/ui/MessageComposer.tsx b/web/src/ui/MessageComposer.tsx
index b73c894..986a333 100644
--- a/web/src/ui/MessageComposer.tsx
+++ b/web/src/ui/MessageComposer.tsx
@@ -110,9 +110,11 @@ const MessageComposer = ({ room, scrollToBottomRef, setReplyToRef }: MessageComp
 				.catch(err => console.error("Failed to send stop typing notification:", err))
 		}
 	}, [client, room.roomID])
-	const onAttachFile = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
+	const doUploadFile = useCallback((file: File | null | undefined) => {
+		if (!file) {
+			return
+		}
 		setLoadingMedia(true)
-		const file = evt.target.files![0]
 		const encrypt = !!room.meta.current.encryption_event
 		fetch(`/_gomuks/upload?encrypt=${encrypt}&filename=${encodeURIComponent(file.name)}`, {
 			method: "POST",
@@ -129,6 +131,15 @@ const MessageComposer = ({ room, scrollToBottomRef, setReplyToRef }: MessageComp
 			.catch(err => window.alert("Failed to upload file: " + err))
 			.finally(() => setLoadingMedia(false))
 	}, [room])
+	const onAttachFile = useCallback(
+		(evt: React.ChangeEvent<HTMLInputElement>) => doUploadFile(evt.target.files?.[0]),
+		[doUploadFile],
+	)
+	useEffect(() => {
+		const listener = (evt: ClipboardEvent) => doUploadFile(evt.clipboardData?.files?.[0])
+		document.addEventListener("paste", listener)
+		return () => document.removeEventListener("paste", listener)
+	}, [doUploadFile])
 	// To ensure the cursor jumps to the end, do this in an effect rather than as the initial value of useState
 	// To try to avoid the input bar flashing, use useLayoutEffect instead of useEffect
 	useLayoutEffect(() => {