n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/composer: add support for pasting files

Browse source
This commit is contained in:
Tulir Asokan 2024-10-19 15:53:40 +03:00
parent 24342a5dce
commit a2353409bf
1 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/ui/MessageComposer.tsx
View file

@ -110,9 +110,11 @@ const MessageComposer = ({ room, scrollToBottomRef, setReplyToRef }: MessageComp
.catch(err => console.error("Failed to send stop typing notification:", err)) .catch(err => console.error("Failed to send stop typing notification:", err))
} }
}, [client, room.roomID]) }, [client, room.roomID])
const onAttachFile = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => { const doUploadFile = useCallback((file: File | null | undefined) => {
if (!file) {
return
}
setLoadingMedia(true) setLoadingMedia(true)
const file = evt.target.files![0]
const encrypt = !!room.meta.current.encryption_event const encrypt = !!room.meta.current.encryption_event
fetch(`/_gomuks/upload?encrypt=${encrypt}&filename=${encodeURIComponent(file.name)}`, { fetch(`/_gomuks/upload?encrypt=${encrypt}&filename=${encodeURIComponent(file.name)}`, {
method: "POST", method: "POST",
@ -129,6 +131,15 @@ const MessageComposer = ({ room, scrollToBottomRef, setReplyToRef }: MessageComp
.catch(err => window.alert("Failed to upload file: " + err)) .catch(err => window.alert("Failed to upload file: " + err))
.finally(() => setLoadingMedia(false)) .finally(() => setLoadingMedia(false))
}, [room]) }, [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 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 // To try to avoid the input bar flashing, use useLayoutEffect instead of useEffect
useLayoutEffect(() => { useLayoutEffect(() => {