deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-05-02 06:33:19 +02:00
Code Issues Projects Releases Wiki Activity

Fix uploader being initialized more than once

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
client/components/ChatInput.vue
View file

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

2
client/js/socket-events/configuration.js
View file

@ -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");

36
client/js/upload.js
View file

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