From df3d95bf2a445ac0bac8d8235da9d4402f0985d8 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 8 Jan 2024 01:12:02 -0800
Subject: [PATCH] refac: message drag file input

---
 src/lib/components/chat/MessageInput.svelte | 24 +++++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index c81d999c..34f4de18 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -119,12 +119,16 @@
 	onMount(() => {
 		const dropZone = document.querySelector('body');
 
-		dropZone?.addEventListener('dragover', (e) => {
+		const onDragOver = (e) => {
 			e.preventDefault();
 			dragged = true;
-		});
+		};
 
-		dropZone.addEventListener('drop', async (e) => {
+		const onDragLeave = () => {
+			dragged = false;
+		};
+
+		const onDrop = async (e) => {
 			e.preventDefault();
 			console.log(e);
 
@@ -158,11 +162,17 @@
 			}
 
 			dragged = false;
-		});
+		};
 
-		dropZone?.addEventListener('dragleave', () => {
-			dragged = false;
-		});
+		dropZone?.addEventListener('dragover', onDragOver);
+		dropZone?.addEventListener('drop', onDrop);
+		dropZone?.addEventListener('dragleave', onDragLeave);
+
+		return () => {
+			dropZone?.removeEventListener('dragover', onDragOver);
+			dropZone?.removeEventListener('drop', onDrop);
+			dropZone?.removeEventListener('dragleave', onDragLeave);
+		};
 	});
 </script>