fixup! feat(files): unify drag and drop methods

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

apps/files/src/components/BreadCrumbs.vue

@@ -141,7 +141,13 @@ export default defineComponent({
 
 		// Hide breadcrumbs if an upload is ongoing
 		shouldShowBreadcrumbs(): boolean {
-			return this.filesListWidth > 400 && !this.isUploadInProgress
+			// If we're uploading files, only show the breadcrumbs
+			// if the files list is greater than 768px wide
+			if (this.isUploadInProgress) {
+				return this.filesListWidth > 768
+			}
+			// If we're not uploading, we have enough space from 400px
+			return this.filesListWidth > 400
 		},
 
 		// used to show the views icon for the first breadcrumb
@@ -240,7 +246,7 @@ export default defineComponent({
 
 			// Else we're moving/copying files
 			const nodes = selection.map(fileid => this.filesStore.getNode(fileid)) as Node[]
-			await onDropInternalFiles(folder, nodes, isCopy)
+			await onDropInternalFiles(nodes, folder, contents.contents, isCopy)
 
 			// Reset selection after we dropped the files
 			// if the dropped files are within the selection

apps/files/src/components/DragAndDropNotice.vue

@@ -53,7 +53,7 @@ import { UploadStatus } from '@nextcloud/upload'
 import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'
 
 import logger from '../logger.js'
-import { handleDrop } from '../services/DropService'
+import { dataTransferToFileTree, handleDrop, onDropExternalFiles } from '../services/DropService'
 
 export default defineComponent({
 	name: 'DragAndDropNotice',
@@ -76,6 +76,10 @@ export default defineComponent({
 	},
 
 	computed: {
+		currentView() {
+			return this.$navigation.active
+		},
+
 		/**
 		 * Check if the current folder has create permissions
 		 */
@@ -146,8 +150,6 @@ export default defineComponent({
 		},
 
 		async onDrop(event: DragEvent) {
-			logger.debug('Dropped on DragAndDropNotice', { event })
-
 			// cantUploadLabel is null if we can upload
 			if (this.cantUploadLabel) {
 				showError(this.cantUploadLabel)
@@ -161,38 +163,50 @@ export default defineComponent({
 			event.preventDefault()
 			event.stopPropagation()
 
-			if (event.dataTransfer && event.dataTransfer.items.length > 0) {
-				// Start upload
-				logger.debug(`Uploading files to ${this.currentFolder.path}`)
-				// Process finished uploads
-				const uploads = await handleDrop(event.dataTransfer)
-				logger.debug('Upload terminated', { uploads })
-
-				if (uploads.some((upload) => upload.status === UploadStatus.FAILED)) {
-					showError(t('files', 'Some files could not be uploaded'))
-					const failedUploads = uploads.filter((upload) => upload.status === UploadStatus.FAILED)
-					logger.debug('Some files could not be uploaded', { failedUploads })
-				} else {
-					showSuccess(t('files', 'Files uploaded successfully'))
-				}
-
-				// 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'])
-
-				if (lastUpload !== undefined) {
-					this.$router.push({
-						...this.$route,
-						params: {
-							view: this.$route.params?.view ?? 'files',
-							fileid: parseInt(lastUpload.response!.headers['oc-fileid']),
-						},
-					})
-				}
+			// Caching the selection
+			const items = [...event.dataTransfer?.items || []] as DataTransferItem[]
+
+			// We need to process the dataTransfer ASAP before the
+			// browser clears it. This is why we cache the items too.
+			const fileTree = await dataTransferToFileTree(items)
+
+			// We might not have the target directory fetched yet
+			const contents = await this.currentView?.getContents(this.currentFolder.path)
+			const folder = contents?.folder
+			if (!folder) {
+				showError(this.t('files', 'Target folder does not exist any more'))
+				return
+			}
+
+			// If another button is pressed, cancel it. This
+			// allows cancelling the drag with the right click.
+			if (event.button !== 0) {
+				return
+			}
+
+			logger.debug('Dropped', { event, folder, fileTree })
+
+			// Check whether we're uploading files
+			const uploads = await onDropExternalFiles(fileTree, folder, contents.contents)
+
+			// 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'])
+
+			if (lastUpload !== undefined) {
+				this.$router.push({
+					...this.$route,
+					params: {
+						view: this.$route.params?.view ?? 'files',
+						fileid: parseInt(lastUpload.response!.headers['oc-fileid']),
+					},
+				})
 			}
+
 			this.dragover = false
 		},
+
 		t,
 	},
 })