1 files changed, 49 insertions, 18 deletions

diff --git a/apps/files/src/components/DragAndDropNotice.vue b/apps/files/src/components/DragAndDropNotice.vue
index 2f013927640..c7684d5c205 100644
--- a/apps/files/src/components/DragAndDropNotice.vue
+++ b/apps/files/src/components/DragAndDropNotice.vue
@@ -26,16 +26,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { Folder, Permission } from '@nextcloud/files'
+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'
 
-import logger from '../logger.js'
+import { useNavigation } from '../composables/useNavigation'
 import { dataTransferToFileTree, onDropExternalFiles } from '../services/DropService'
+import logger from '../logger.ts'
+import type { RawLocation } from 'vue-router'
 
 export default defineComponent({
 	name: 'DragAndDropNotice',
@@ -46,11 +51,19 @@ export default defineComponent({
 
 	props: {
 		currentFolder: {
-			type: Folder,
+			type: Object as PropType<Folder>,
 			required: true,
 		},
 	},
 
+	setup() {
+		const { currentView } = useNavigation()
+
+		return {
+			currentView,
+		}
+	},
+
 	data() {
 		return {
 			dragover: false,
@@ -58,10 +71,6 @@ export default defineComponent({
 	},
 
 	computed: {
-		currentView() {
-			return this.$navigation.active
-		},
-
 		/**
 		 * Check if the current folder has create permissions
 		 */
@@ -76,22 +85,33 @@ export default defineComponent({
 			if (this.isQuotaExceeded) {
 				return this.t('files', 'Your have used your space quota and cannot upload files anymore')
 			} else if (!this.canUpload) {
-				return this.t('files', 'You don’t have permission to upload or create files here')
+				return this.t('files', 'You do not have permission to upload or create files here.')
 			}
 			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)
@@ -106,6 +126,7 @@ export default defineComponent({
 			if (isForeignFile) {
 				// Only handle uploading of outside files (not Nextcloud files)
 				this.dragover = true
+				this.resetDragOver()
 			}
 		},
 
@@ -120,6 +141,7 @@ export default defineComponent({
 
 			if (this.dragover) {
 				this.dragover = false
+				this.resetDragOver.clear()
 			}
 		},
 
@@ -128,6 +150,7 @@ export default defineComponent({
 			event.preventDefault()
 			if (this.dragover) {
 				this.dragover = false
+				this.resetDragOver.clear()
 			}
 		},
 
@@ -180,16 +203,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,
@@ -204,7 +235,7 @@ export default defineComponent({
 	justify-content: center;
 	width: 100%;
 	// Breadcrumbs height + row thead height
-	min-height: calc(58px + 55px);
+	min-height: calc(58px + 44px);
 	margin: 0;
 	user-select: none;
 	color: var(--color-text-maxcontrast);
@@ -212,7 +243,7 @@ export default defineComponent({
 	border-color: black;
 
 	h3 {
-		margin-left: 16px;
+		margin-inline-start: 16px;
 		color: inherit;
 	}