From 2ce374fe858992c5c930b0c49bf40cba2928f839 Mon Sep 17 00:00:00 2001
From: Maxime Poulin <code@max-p.me>
Date: Sun, 5 Feb 2023 22:32:12 -0500
Subject: [PATCH] Fix uploader mount/unmount lifecycle

Currently, in `ChatInput.vue` we call `upload.abort()` which removes the event listeners, which are never added back. This effectively permanently disable uploads if the user navigates away to Settings or any other non-chat pages, and back.

Moves the binding to `mounted()` so that they're properly rebound when a chat window is in view, and also adds an `unmounted()` for clarity.

This should also fix an edge case if the page opens up on a non-chat page and there was never a ChatInput to unbind it, such as login page or add network pages.
---
 client/components/ChatInput.vue |  1 +
 client/js/upload.ts             | 27 +++++++++++++++------------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index e89ef276..704beda4 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -337,6 +337,7 @@ export default defineComponent({
 				autocompletionRef.value = undefined;
 			}
 
+			upload.unmounted();
 			upload.abort();
 		});
 
diff --git a/client/js/upload.ts b/client/js/upload.ts
index fc545787..dbe44972 100644
--- a/client/js/upload.ts
+++ b/client/js/upload.ts
@@ -18,18 +18,26 @@ class Uploader {
 	onPaste = (e: ClipboardEvent) => this.paste(e);
 
 	init() {
-		document.addEventListener("dragenter", this.onDragEnter);
-		document.addEventListener("dragover", this.onDragOver);
-		document.addEventListener("dragleave", this.onDragLeave);
-		document.addEventListener("drop", this.onDrop);
-		document.addEventListener("paste", this.onPaste);
-
 		socket.on("upload:auth", (token) => this.uploadNextFileInQueue(token));
 	}
 
 	mounted() {
 		this.overlay = document.getElementById("upload-overlay") as HTMLDivElement;
 		this.uploadProgressbar = document.getElementById("upload-progressbar") as HTMLSpanElement;
+
+		document.addEventListener("dragenter", this.onDragEnter);
+		document.addEventListener("dragover", this.onDragOver);
+		document.addEventListener("dragleave", this.onDragLeave);
+		document.addEventListener("drop", this.onDrop);
+		document.addEventListener("paste", this.onPaste);
+	}
+
+	unmounted() {
+		document.removeEventListener("dragenter", this.onDragEnter);
+		document.removeEventListener("dragover", this.onDragOver);
+		document.removeEventListener("dragleave", this.onDragLeave);
+		document.removeEventListener("drop", this.onDrop);
+		document.removeEventListener("paste", this.onPaste);
 	}
 
 	dragOver(event: DragEvent) {
@@ -308,12 +316,6 @@ class Uploader {
 			this.xhr.abort();
 			this.xhr = null;
 		}
-
-		document.removeEventListener("dragenter", this.onDragEnter);
-		document.removeEventListener("dragover", this.onDragOver);
-		document.removeEventListener("dragleave", this.onDragLeave);
-		document.removeEventListener("drop", this.onDrop);
-		document.removeEventListener("paste", this.onPaste);
 	}
 }
 
@@ -323,5 +325,6 @@ export default {
 	abort: () => instance.abort(),
 	initialize: () => instance.init(),
 	mounted: () => instance.mounted(),
+	unmounted: () => instance.unmounted(),
 	triggerUpload: (files) => instance.triggerUpload(files),
 };