fixup

apps/files/src/components/DragAndDropNotice.vue

@@ -4,12 +4,13 @@
 -->
 <template>
 	<div v-show="dragover"
-		class="files-list__drag-drop-notice"
-		data-cy-files-drag-drop-area
 		v-files-drop.stop.prevent="{
 			enable: canUpload,
 			targetFolder: currentFolder,
-		}">
+			callback: onFilesUploaded,
+		}"
+		class="files-list__drag-drop-notice"
+		data-cy-files-drag-drop-area>
 		<div class="files-list__drag-drop-notice-wrapper">
 			<template v-if="canUpload && !isQuotaExceeded">
 				<TrayArrowDownIcon :size="48" />
@@ -29,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import type { Folder } from '@nextcloud/files'
+import { File, Folder } from '@nextcloud/files'
 import type { PropType } from 'vue'
 
 import { Permission } from '@nextcloud/files'
@@ -43,6 +44,8 @@ import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'
 import { useNavigation } from '../composables/useNavigation'
 import vFilesDrop from '../directives/vFilesDrop.ts'
 import logger from '../logger.ts'
+import { getCurrentUser } from '@nextcloud/auth'
+import { emit } from '@nextcloud/event-bus'
 
 export default defineComponent({
 	name: 'DragAndDropNotice',
@@ -174,12 +177,30 @@ export default defineComponent({
 				return
 			}
 
+			// uploads in the current folder with file id returned
+			const localFileUploads = uploads.filter((upload) => (
+				upload.source.replace(this.currentFolder.source, '').split('/').length === 2
+				&& upload.response?.headers?.['oc-fileid'] !== undefined
+			))
+
+			for (const upload of localFileUploads) {
+				const Cls = upload.file.type === 'httpd/unix-directory'
+					? Folder
+					: File
+				emit('files:node:created', new Cls({
+					owner: getCurrentUser()?.uid ?? 'anonymous',
+					source: upload.source,
+					root: this.currentFolder.root!,
+					id: Number.parseInt(upload.response?.headers?.['oc-fileid']),
+					permissions: this.currentFolder.permissions,
+					crtime: new Date(),
+					mtime: new Date(),
+				}))
+			}
+
 			// Scroll to last successful upload in current directory if terminated
-			const lastUpload = uploads.findLast((upload) => upload.status !== UploadStatus.FAILED
-				&& !upload.file.webkitRelativePath.includes('/')
-				&& upload.response?.headers?.['oc-fileid']
-				// Only use the last ID if it's in the current folder
-				&& upload.source.replace(this.currentFolder.source, '').split('/').length === 2)
+			const lastUpload = localFileUploads.findLast((upload) => upload.status !== UploadStatus.FAILED
+				&& !upload.file.webkitRelativePath.includes('/'))
 
 			if (lastUpload !== undefined) {
 				logger.debug('Scrolling to last upload in current folder', { lastUpload })

apps/files/src/composables/useFileListWidth.ts

@@ -3,18 +3,36 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import type { Ref } from 'vue'
-import { useElementSize } from '@vueuse/core'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, readonly, ref } from 'vue'
+
+// Currently observed element
+let element: HTMLElement | undefined
+// Reactive width
+const width = ref(0)
+// The resize observer for the file list
+const observer = new ResizeObserver(([el]) => {
+	width.value = el.contentRect.width
+})
 
 /**
  * Get the reactive width of the file list
  */
 export function useFileListWidth(): Readonly<Ref<number>> {
-	const element = ref(document.querySelector<HTMLElement>('#app-content-vue') ?? document.body)
-	onMounted(() => { element.value = document.querySelector('#app-content-vue')! })
-
-	const { width, stop } = useElementSize(element)
-	onUnmounted(stop)
+	onMounted(() => {
+		// Check if the element for the file list has changed
+		// this can only happen if this composable is used within the files root app
+		// or the root app was recreated for some reason
+		const el = document.querySelector<HTMLElement>('#app-content-vue') ?? document.body
+		// If the element changed (or initial call) we need to observe it
+		if (el !== element) {
+			observer.observe(el)
+			// If there was a previous element we need to unobserve it
+			if (element) {
+				observer.unobserve(element)
+			}
+			element = el
+		}
+	})
 
-	return width
+	return readonly(width)
 }

apps/files/src/store/dragging.ts

@@ -2,14 +2,14 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+import type { FileSource } from '../types'
 import { defineStore } from 'pinia'
 import Vue from 'vue'
-import type { DragAndDropStore, FileSource } from '../types'
 
 export const useDragAndDropStore = defineStore('dragging', {
 	state: () => ({
-		dragging: [],
-	} as DragAndDropStore),
+		dragging: [] as string[],
+	}),
 
 	getters: {
 		/**