Fix uploader being initialized more than once

This commit is contained in:
Pavel Djundik 2019-10-21 18:52:46 +03:00
parent d237647f8a
commit 63c638e9ad
3 changed files with 24 additions and 29 deletions

View File

@ -18,7 +18,13 @@
aria-label="Upload file" aria-label="Upload file"
@click="openFileUpload" @click="openFileUpload"
> >
<input id="upload-input" ref="uploadInput" type="file" multiple /> <input
id="upload-input"
ref="uploadInput"
type="file"
multiple
@change="onUploadInputChange"
/>
<button <button
id="upload" id="upload"
type="button" type="button"
@ -138,7 +144,7 @@ export default {
}); });
if (this.$root.isFileUploadEnabled) { if (this.$root.isFileUploadEnabled) {
upload.initialize(); upload.mounted();
} }
}, },
destroyed() { destroyed() {
@ -220,6 +226,11 @@ export default {
socket.emit("input", {target, text}); 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() { openFileUpload() {
this.$refs.uploadInput.click(); this.$refs.uploadInput.click();
}, },

View File

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

View File

@ -4,15 +4,12 @@ const socket = require("./socket");
const updateCursor = require("undate").update; const updateCursor = require("undate").update;
class Uploader { class Uploader {
init() { init(maxFileSize) {
this.maxFileSize = maxFileSize;
this.vueApp = require("./vue").vueApp; this.vueApp = require("./vue").vueApp;
this.xhr = null; this.xhr = null;
this.fileQueue = []; 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("dragenter", (e) => this.dragEnter(e));
document.addEventListener("dragover", (e) => this.dragOver(e)); document.addEventListener("dragover", (e) => this.dragOver(e));
document.addEventListener("dragleave", (e) => this.dragLeave(e)); document.addEventListener("dragleave", (e) => this.dragLeave(e));
@ -22,6 +19,11 @@ class Uploader {
socket.on("upload:auth", (token) => this.uploadNextFileInQueue(token)); socket.on("upload:auth", (token) => this.uploadNextFileInQueue(token));
} }
mounted() {
this.overlay = document.getElementById("upload-overlay");
this.uploadProgressbar = document.getElementById("upload-progressbar");
}
dragOver(event) { dragOver(event) {
// Prevent dragover event completely and do nothing with it // Prevent dragover event completely and do nothing with it
// This stops the browser from trying to guess which cursor to show // This stops the browser from trying to guess which cursor to show
@ -82,12 +84,6 @@ class Uploader {
this.triggerUpload(files); 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) { triggerUpload(files) {
if (!files.length) { if (!files.length) {
return; return;
@ -225,21 +221,9 @@ class Uploader {
const instance = new 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 = { module.exports = {
abort: () => instance.abort(), abort: () => instance.abort(),
initialize, initialize: () => instance.init(),
setMaxFileSize, mounted: () => instance.mounted(),
triggerUpload: (files) => instance.triggerUpload(files),
}; };