From 88dc777a10e68f08d74b78724a62214efbd7ee4f Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Fri, 23 Aug 2024 19:55:03 +0200
Subject: [PATCH] fix(files): Reset drop notice on firefox

On firefox there is an old bug where when you move a dragged file outside
the window the `dragleave` event is never emitted.
So we just use a timeout to reset the drag over state.

Also a small change: Use the ID of the main container instead of relying on tag name and class.
(The ID is guranteed as other APIs rely on it, while the class is just used internally).

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../src/components/DragAndDropNotice.vue      | 38 +++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/apps/files/src/components/DragAndDropNotice.vue b/apps/files/src/components/DragAndDropNotice.vue
index 40f95f54aebbe..5d125e3b6cde4 100644
--- a/apps/files/src/components/DragAndDropNotice.vue
+++ b/apps/files/src/components/DragAndDropNotice.vue
@@ -45,11 +45,13 @@
 
 <script lang="ts">
 import type { Folder } from '@nextcloud/files'
+
 import { Permission } from '@nextcloud/files'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { UploadStatus } from '@nextcloud/upload'
 import { defineComponent, type PropType } from 'vue'
+import debounce from 'debounce'
 
 import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'
 
@@ -104,18 +106,29 @@ export default defineComponent({
 			}
 			return null
 		},
+
+		/**
+		 * Debounced function to reset the drag over state
+		 * Required as Firefox has a bug where no dragleave is emitted:
+		 * https://bugzilla.mozilla.org/show_bug.cgi?id=656164
+		 */
+		resetDragOver() {
+			return debounce(() => {
+				this.dragover = false
+			}, 3000)
+		},
 	},
 
 	mounted() {
 		// Add events on parent to cover both the table and DragAndDrop notice
-		const mainContent = window.document.querySelector('main.app-content') as HTMLElement
+		const mainContent = window.document.getElementById('app-content-vue') as HTMLElement
 		mainContent.addEventListener('dragover', this.onDragOver)
 		mainContent.addEventListener('dragleave', this.onDragLeave)
 		mainContent.addEventListener('drop', this.onContentDrop)
 	},
 
 	beforeDestroy() {
-		const mainContent = window.document.querySelector('main.app-content') as HTMLElement
+		const mainContent = window.document.getElementById('app-content-vue') as HTMLElement
 		mainContent.removeEventListener('dragover', this.onDragOver)
 		mainContent.removeEventListener('dragleave', this.onDragLeave)
 		mainContent.removeEventListener('drop', this.onContentDrop)
@@ -130,6 +143,7 @@ export default defineComponent({
 			if (isForeignFile) {
 				// Only handle uploading of outside files (not Nextcloud files)
 				this.dragover = true
+				this.resetDragOver()
 			}
 		},
 
@@ -144,6 +158,7 @@ export default defineComponent({
 
 			if (this.dragover) {
 				this.dragover = false
+				this.resetDragOver.clear()
 			}
 		},
 
@@ -152,6 +167,7 @@ export default defineComponent({
 			event.preventDefault()
 			if (this.dragover) {
 				this.dragover = false
+				this.resetDragOver.clear()
 			}
 		},
 
@@ -204,16 +220,24 @@ export default defineComponent({
 
 			if (lastUpload !== undefined) {
 				logger.debug('Scrolling to last upload in current folder', { lastUpload })
-				this.$router.push({
-					...this.$route,
+				const location: RawLocation = {
+					path: this.$route.path,
+					// Keep params but change file id
 					params: {
-						view: this.$route.params?.view ?? 'files',
-						fileid: parseInt(lastUpload.response!.headers['oc-fileid']),
+						...this.$route.params,
+						fileid: String(lastUpload.response!.headers['oc-fileid']),
+					},
+					query: {
+						...this.$route.query,
 					},
-				})
+				}
+				// Remove open file from query
+				delete location.query.openfile
+				this.$router.push(location)
 			}
 
 			this.dragover = false
+			this.resetDragOver.clear()
 		},
 
 		t,