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;
}
upload.unmounted();
upload.abort();
});

View file

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