Merge pull request #3467 from thelounge/xpaw/fix-upload-init

Fix uploader being initialized more than once

client/components/ChatInput.vue

@@ -18,7 +18,13 @@
 			aria-label="Upload file"
 			@click="openFileUpload"
 		>
-			<input id="upload-input" ref="uploadInput" type="file" multiple />
+			<input
+				id="upload-input"
+				ref="uploadInput"
+				type="file"
+				multiple
+				@change="onUploadInputChange"
+			/>
 			<button
 				id="upload"
 				type="button"
@@ -138,7 +144,7 @@ export default {
 		});
 
 		if (this.$root.isFileUploadEnabled) {
-			upload.initialize();
+			upload.mounted();
 		}
 	},
 	destroyed() {
@@ -220,6 +226,11 @@ export default {
 
 			socket.emit("input", {target, text});
 		},
+		onUploadInputChange() {
+			const files = Array.from(this.$refs.uploadInput.files);
+			upload.triggerUpload(files);
+			this.$refs.uploadInput.value = ""; // Reset <input> element so you can upload the same file
+		},
 		openFileUpload() {
 			this.$refs.uploadInput.click();
 		},

client/js/socket-events/configuration.js

@@ -49,7 +49,7 @@ socket.on("configuration", function(data) {
 	});
 
 	if (data.fileUpload) {
-		upload.setMaxFileSize(data.fileUploadMaxFileSize);
+		upload.initialize(data.fileUploadMaxFileSize);
 	}
 
 	utils.togglePasswordField("#change-password .reveal-password");

client/js/upload.js

@@ -4,15 +4,12 @@ const socket = require("./socket");
 const updateCursor = require("undate").update;
 
 class Uploader {
-	init() {
+	init(maxFileSize) {
+		this.maxFileSize = maxFileSize;
 		this.vueApp = require("./vue").vueApp;
 		this.xhr = null;
 		this.fileQueue = [];
-		this.overlay = document.getElementById("upload-overlay");
-		this.uploadInput = document.getElementById("upload-input");
-		this.uploadProgressbar = document.getElementById("upload-progressbar");
 
-		this.uploadInput.addEventListener("change", (e) => this.filesChanged(e));
 		document.addEventListener("dragenter", (e) => this.dragEnter(e));
 		document.addEventListener("dragover", (e) => this.dragOver(e));
 		document.addEventListener("dragleave", (e) => this.dragLeave(e));
@@ -22,6 +19,11 @@ class Uploader {
 		socket.on("upload:auth", (token) => this.uploadNextFileInQueue(token));
 	}
 
+	mounted() {
+		this.overlay = document.getElementById("upload-overlay");
+		this.uploadProgressbar = document.getElementById("upload-progressbar");
+	}
+
 	dragOver(event) {
 		// Prevent dragover event completely and do nothing with it
 		// This stops the browser from trying to guess which cursor to show
@@ -82,12 +84,6 @@ class Uploader {
 		this.triggerUpload(files);
 	}
 
-	filesChanged() {
-		const files = Array.from(this.uploadInput.files);
-		this.triggerUpload(files);
-		this.uploadInput.value = ""; // Reset <input> element so you can upload the same file
-	}
-
 	triggerUpload(files) {
 		if (!files.length) {
 			return;
@@ -225,21 +221,9 @@ class Uploader {
 
 const instance = new Uploader();
 
-function initialize() {
-	instance.init();
-	return instance;
-}
-
-/**
- * Called in the `configuration` socket event.
- * Makes it so the user can be notified if a file is too large without waiting for the upload to finish server-side.
- **/
-function setMaxFileSize(kb) {
-	instance.maxFileSize = kb;
-}
-
 module.exports = {
 	abort: () => instance.abort(),
-	initialize,
-	setMaxFileSize,
+	initialize: () => instance.init(),
+	mounted: () => instance.mounted(),
+	triggerUpload: (files) => instance.triggerUpload(files),
 };