Fix uploader being initialized more than once
This commit is contained in:
parent
d237647f8a
commit
63c638e9ad
@ -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();
|
||||||
},
|
},
|
||||||
|
@ -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");
|
||||||
|
@ -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),
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user