Fix uploader mount/unmount lifecycle #4691

This commit is contained in:
Reto Brunner 2023-02-18 11:16:30 +01:00
commit d93cd88dd5
2 changed files with 16 additions and 12 deletions

View file

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

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),
}; };