From fa96231b286d052cffe743911c6004d49f2a7d90 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Wed, 23 Mar 2022 08:54:48 +0000
Subject: [PATCH] drag and drop only accepts files and fix class handling
(remove direct dom...
---
resources/vue/components/BlubberThread.vue | 21 ++++++++++++++-------
1 file changed, 14 insertions(+), 7 deletions(-)
diff --git a/resources/vue/components/BlubberThread.vue b/resources/vue/components/BlubberThread.vue
index dcddc2887e4..5feb8bde17a 100644
--- a/resources/vue/components/BlubberThread.vue
+++ b/resources/vue/components/BlubberThread.vue
@@ -1,5 +1,5 @@
<template>
- <div class="blubber_thread"
+ <div class="blubber_thread" :class="{dragover: dragging}"
:id="'blubberthread_' + thread_data.thread_posting.thread_id"
@dragover.prevent="dragover" @dragleave.prevent="dragleave"
@drop.prevent="upload">
@@ -92,7 +92,8 @@
data: function () {
return {
already_loading_up: 0,
- already_loading_down: 0
+ already_loading_down: 0,
+ dragging: false
};
},
props: ['thread_data'],
@@ -211,7 +212,13 @@
});
},
upload (event) {
- let files = typeof event.dataTransfer !== 'undefined'
+ const viaDragAndDrop = event.dataTransfer !== undefined;
+
+ if (viaDragAndDrop && !event.dataTransfer.types.includes('Files')) {
+ return;
+ }
+
+ let files = viaDragAndDrop
? event.dataTransfer.files // file drop
: event.target.files; // upload button
let thread = this;
@@ -245,11 +252,11 @@
this.dragleave();
},
- dragover () {
- $(this.$el).addClass('dragover');
+ dragover (event) {
+ this.dragging = event.dataTransfer.types.includes('Files');
},
- dragleave () {
- $(this.$el).removeClass('dragover');
+ dragleave (event) {
+ this.dragging = false;
},
getUserProfileURL (user_id, username) {
if (username) {
--
GitLab