From 71baabab4679dbee6305cbf71036d0cfd94528ca Mon Sep 17 00:00:00 2001
From: Michael Peters <michael@copium>
Date: Mon, 27 Dec 2021 21:13:55 -0600
Subject: [PATCH] paste an image

---
 .../webapp/elements/sections/send-message.tsx | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/client/webapp/elements/sections/send-message.tsx b/src/client/webapp/elements/sections/send-message.tsx
index 92826fb..650caf4 100644
--- a/src/client/webapp/elements/sections/send-message.tsx
+++ b/src/client/webapp/elements/sections/send-message.tsx
@@ -3,7 +3,7 @@ const electronConsole = electronRemote.getGlobal('console') as Console;
 import Logger from '../../../../logger/logger';
 const LOG = Logger.create(__filename, electronConsole);
 
-import React, { FC, FormEvent, KeyboardEvent, RefObject, useCallback, useMemo, useRef, useState } from 'react';
+import React, { ClipboardEvent, FC, FormEvent, KeyboardEvent, RefObject, useCallback, useMemo, useRef, useState } from 'react';
 import { Channel } from '../../data-types';
 import CombinedGuild from '../../guild-combined';
 import BaseElements from '../require/base-elements';
@@ -54,7 +54,9 @@ export interface SendMessageProps {
 const SendMessage: FC<SendMessageProps> = (props: SendMessageProps) => {
 	const { guild, channel } = props;
 
+	const isMounted = ReactHelper.useIsMountedRef();
 	const contentEditableRef = useRef<HTMLDivElement>(null);
+
 	const [ text, setText ] = useState<string>('');
 	const [ enabled, setEnabled ] = useState<boolean>(true);
 
@@ -96,6 +98,22 @@ const SendMessage: FC<SendMessageProps> = (props: SendMessageProps) => {
 		}
 	}, [ sendCallable ]);
 
+	const onPaste = useCallback((e: ClipboardEvent<HTMLDivElement>) => {
+		for (const item of e.clipboardData.items) {
+			if (item.kind === 'file') {
+				e.preventDefault();
+				(async () => {
+					const file = item.getAsFile();
+					if (!file) return;
+					const buff = Buffer.from(await file.arrayBuffer());
+					if (!isMounted) return;
+					setAttachmentName(file.name);
+					setAttachmentBuff(buff);
+				})();
+				return;
+			}
+		}
+	}, []);
 
 	const removeAttachment = useCallback(() => {
 		setAttachmentBuff(null);
@@ -135,6 +153,7 @@ const SendMessage: FC<SendMessageProps> = (props: SendMessageProps) => {
 						className={textInputClassName} contentEditable={contentEditableType}
 						data-placeholder={`Message #${channel.name}`} 
 						onInput={onTextInput} onKeyDown={onTextKeyDown}
+						onPaste={onPaste}
 					/>
 				</div>
 			</div>