supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix uploader mount/unmount lifecycle

Browse Source 
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.
This commit is contained in:
Maxime Poulin 2023-02-05 22:32:12 -05:00
parent 00366967ae
commit 2ce374fe85
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/components/ChatInput.vue
View File

@ -337,6 +337,7 @@ export default defineComponent({
autocompletionRef.value = undefined; autocompletionRef.value = undefined;
} }
upload.unmounted();
upload.abort(); upload.abort();
}); });

27
client/js/upload.ts
View File

@ -18,18 +18,26 @@ class Uploader {
onPaste = (e: ClipboardEvent) => this.paste(e); onPaste = (e: ClipboardEvent) => this.paste(e);
init() { 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)); socket.on("upload:auth", (token) => this.uploadNextFileInQueue(token));
} }
mounted() { mounted() {
this.overlay = document.getElementById("upload-overlay") as HTMLDivElement; this.overlay = document.getElementById("upload-overlay") as HTMLDivElement;
this.uploadProgressbar = document.getElementById("upload-progressbar") as HTMLSpanElement; 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) { dragOver(event: DragEvent) {
@ -308,12 +316,6 @@ class Uploader {
this.xhr.abort(); this.xhr.abort();
this.xhr = null; 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(), abort: () => instance.abort(),
initialize: () => instance.init(), initialize: () => instance.init(),
mounted: () => instance.mounted(), mounted: () => instance.mounted(),
unmounted: () => instance.unmounted(),
triggerUpload: (files) => instance.triggerUpload(files), triggerUpload: (files) => instance.triggerUpload(files),
}; };