diff options
| author | Jan-Hendrik Willms <tleilax+studip@gmail.com> | 2022-03-23 08:54:48 +0000 |
|---|---|---|
| committer | Jan-Hendrik Willms <tleilax+studip@gmail.com> | 2022-03-23 08:54:48 +0000 |
| commit | fa96231b286d052cffe743911c6004d49f2a7d90 (patch) | |
| tree | bb53d242a3873e5390ad3caf5eceb7556fc77162 | |
| parent | 132660a93630336e3c6f9043407d382584ea8d43 (diff) | |
drag and drop only accepts files and fix class handling (remove direct dom...
| -rw-r--r-- | resources/vue/components/BlubberThread.vue | 21 |
1 files changed, 14 insertions, 7 deletions
diff --git a/resources/vue/components/BlubberThread.vue b/resources/vue/components/BlubberThread.vue index dcddc28..5feb8bd 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) { |