fix(files): Allow to drag and drop new files also on empty directories

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 42 insertions, 30 deletions

diff --git a/apps/files/src/components/DragAndDropNotice.vue b/apps/files/src/components/DragAndDropNotice.vue
index d5f93dac256..1e53556e1f5 100644
--- a/apps/files/src/components/DragAndDropNotice.vue
+++ b/apps/files/src/components/DragAndDropNotice.vue
@@ -20,8 +20,8 @@
 	-
 	-->
 <template>
-	<div class="files-list__drag-drop-notice"
-		:class="{ 'files-list__drag-drop-notice--dragover': dragover }"
+	<div v-show="dragover"
+		class="files-list__drag-drop-notice"
 		@drop="onDrop">
 		<div class="files-list__drag-drop-notice-wrapper">
 			<TrayArrowDownIcon :size="48" />
@@ -34,17 +34,16 @@
 
 <script lang="ts">
 import type { Upload } from '@nextcloud/upload'
-import { join } from 'path'
 import { showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { getUploader } from '@nextcloud/upload'
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
 import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'
 
 import logger from '../logger.js'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'DragAndDropNotice',
 
 	components: {
@@ -56,16 +55,43 @@ export default Vue.extend({
 			type: Object,
 			required: true,
 		},
-		dragover: {
-			type: Boolean,
-			default: false,
-		},
+	},
+
+	data() {
+		return {
+			dragover: false,
+		}
+	},
+
+	mounted() {
+		// Add events on parent to cover both the table and DragAndDrop notice
+		const mainContent = window.document.querySelector('main.app-content') as HTMLElement
+		mainContent.addEventListener('dragover', this.onDragOver)
+		mainContent.addEventListener('dragleave', this.onDragLeave)
+	},
+
+	beforeDestroy() {
+		const mainContent = window.document.querySelector('main.app-content') as HTMLElement
+		mainContent.removeEventListener('dragover', this.onDragOver)
+		mainContent.removeEventListener('dragleave', this.onDragLeave)
 	},
 
 	methods: {
-		onDrop(event: DragEvent) {
-			this.$emit('update:dragover', false)
+		onDragOver(event: DragEvent) {
+			const isForeignFile = event.dataTransfer?.types.includes('Files')
+			if (isForeignFile) {
+				// Only handle uploading
+				this.dragover = true
+			}
+		},
 
+		onDragLeave(/* event: DragEvent */) {
+			if (this.dragover) {
+				this.dragover = false
+			}
+		},
+
+		onDrop(event: DragEvent) {
 			if (this.$el.querySelector('tbody')?.contains(event.target as Node)) {
 				return
 			}
@@ -91,12 +117,13 @@ export default Vue.extend({
 					// Scroll to last upload if terminated
 					const lastUpload = uploads[uploads.length - 1]
 					if (lastUpload?.response?.headers?.['oc-fileid']) {
-						this.$router.push(Object.assign({}, this.$route, {
+						this.$router.push({
+							...this.$route,
 							params: {
 								// Remove instanceid from header response
 								fileid: parseInt(lastUpload.response?.headers?.['oc-fileid']),
 							},
-						}))
+						})
 					}
 				})
 			}
@@ -108,12 +135,7 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .files-list__drag-drop-notice {
-	position: absolute;
-	z-index: 9999;
-	top: 0;
-	right: 0;
-	left: 0;
-	display: none;
+	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 100%;
@@ -123,11 +145,7 @@ export default Vue.extend({
 	user-select: none;
 	color: var(--color-text-maxcontrast);
 	background-color: var(--color-main-background);
-
-	&--dragover {
-		display: flex;
-		border-color: black;
-	}
+	border-color: black;
 
 	h3 {
 		margin-left: 16px;
@@ -144,12 +162,6 @@ export default Vue.extend({
 		border: 2px var(--color-border-dark) dashed;
 		border-radius: var(--border-radius-large);
 	}
-
-	&__close {
-		position: absolute !important;
-		top: 10px;
-		right: 10px;
-	}
 }
 
 </style>