From 0a1ba4ec2d23caf70b71eec4d850cf2dce4f502e Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Sat, 2 Dec 2023 03:05:30 +0100
Subject: [PATCH] fix(files): Correctly handle dropping folders on file list

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../src/components/DragAndDropNotice.vue      |  31 ++--
 apps/files/src/services/DropService.ts        | 133 ++++++++++++++++++
 2 files changed, 144 insertions(+), 20 deletions(-)
 create mode 100644 apps/files/src/services/DropService.ts

diff --git a/apps/files/src/components/DragAndDropNotice.vue b/apps/files/src/components/DragAndDropNotice.vue
index 73f6ad13f47d7..849154b0fad77 100644
--- a/apps/files/src/components/DragAndDropNotice.vue
+++ b/apps/files/src/components/DragAndDropNotice.vue
@@ -33,14 +33,14 @@
 </template>
 
 <script lang="ts">
-import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
-import { getUploader } from '@nextcloud/upload'
 import { defineComponent } from 'vue'
 
 import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'
 
 import logger from '../logger.js'
+import { handleDrop } from '../services/DropService'
+import { showSuccess } from '@nextcloud/dialogs'
 
 export default defineComponent({
 	name: 'DragAndDropNotice',
@@ -98,39 +98,30 @@ export default defineComponent({
 			event.preventDefault()
 			event.stopPropagation()
 
-			if (event.dataTransfer && event.dataTransfer.files?.length > 0) {
-				const uploader = getUploader()
-				uploader.destination = this.currentFolder
-
+			if (event.dataTransfer && event.dataTransfer.items.length > 0) {
 				// Start upload
 				logger.debug(`Uploading files to ${this.currentFolder.path}`)
-				const promises = [...event.dataTransfer.files].map(async (file: File) => {
-					try {
-						return await uploader.upload(file.name, file)
-					} catch (e) {
-						showError(t('files', 'Uploading "{filename}" failed', { filename: file.name }))
-						throw e
-					}
-				})
-
 				// Process finished uploads
-				Promise.all(promises).then((uploads) => {
+				handleDrop(event.dataTransfer).then((uploads) => {
 					logger.debug('Upload terminated', { uploads })
 					showSuccess(t('files', 'Upload successful'))
 
-					// Scroll to last upload if terminated
-					const lastUpload = uploads[uploads.length - 1]
-					if (lastUpload?.response?.headers?.['oc-fileid']) {
+					// Scroll to first upload if terminated
+					const firstUpload = uploads[0]
+					// the first upload is guranteed to be in current dir or if not only folders were dropped
+					if (!firstUpload.file.webkitRelativePath.includes('/') && firstUpload?.response?.headers?.['oc-fileid']) {
 						this.$router.push({
 							...this.$route,
 							params: {
+								view: this.$route.params?.view ?? 'files',
 								// Remove instanceid from header response
-								fileid: parseInt(lastUpload.response?.headers?.['oc-fileid']),
+								fileid: parseInt(firstUpload.response?.headers?.['oc-fileid']),
 							},
 						})
 					}
 				})
 			}
+			this.dragover = false
 		},
 		t,
 	},
diff --git a/apps/files/src/services/DropService.ts b/apps/files/src/services/DropService.ts
new file mode 100644
index 0000000000000..4b4f98a01d643
--- /dev/null
+++ b/apps/files/src/services/DropService.ts
@@ -0,0 +1,133 @@
+/**
+ * @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import type { Upload } from '@nextcloud/upload'
+import type { FileStat, ResponseDataDetailed } from 'webdav'
+
+import { showError } from '@nextcloud/dialogs'
+import { emit } from '@nextcloud/event-bus'
+import { davGetClient, davGetDefaultPropfind, davResultToNode, davRootPath } from '@nextcloud/files'
+import { translate as t } from '@nextcloud/l10n'
+import { getUploader } from '@nextcloud/upload'
+import logger from '../logger.js'
+
+export const handleDrop = async (data: DataTransfer) => {
+	// TODO: Maybe handle `getAsFileSystemHandle()` in the future
+
+	const uploads = [] as Upload[]
+	for (const item of data.items) {
+		if (item.kind !== 'file') {
+			logger.debug('Skipping dropped item', { kind: item.kind, type: item.type })
+			continue
+		}
+
+		// MDN recommends to try both, as it might be renamed in the future
+		const entry = (item as unknown as { getAsEntry?: () => FileSystemEntry|undefined})?.getAsEntry?.() ?? item.webkitGetAsEntry()
+
+		// Handle browser issues if Filesystem API is not available. Fallback to File API
+		if (entry === null) {
+			logger.debug('Could not get FilesystemEntry of item, falling back to file')
+			const file = item.getAsFile()
+			if (file === null) {
+				logger.warn('Could not process DataTransferItem', { type: item.type, kind: item.kind })
+				showError(t('files', 'One of the dropped files could not be processed'))
+			} else {
+				uploads.push(await handleFileUpload(file))
+			}
+		} else {
+			logger.debug('Handle recursive upload', { entry: entry.name })
+			// Use Filesystem API
+			uploads.push(...await handleRecursiveUpload(entry))
+		}
+	}
+	return uploads
+}
+
+const handleFileUpload = async (file: File, path: string = '') => {
+	const uploader = getUploader()
+
+	try {
+		return await uploader.upload(`${path}${file.name}`, file)
+	} catch (e) {
+		showError(t('files', 'Uploading "{filename}" failed', { filename: file.name }))
+		throw e
+	}
+}
+
+const handleRecursiveUpload = async (entry: FileSystemEntry, path: string = ''): Promise<Upload[]> => {
+	if (entry.isFile) {
+		return [
+			await new Promise<Upload>((resolve, reject) => {
+				(entry as FileSystemFileEntry).file(
+					async (file) => resolve(await handleFileUpload(file, path)),
+					(error) => reject(error),
+				)
+			}),
+		]
+	} else {
+		const directory = entry as FileSystemDirectoryEntry
+		logger.debug('Handle directory recursivly', { name: directory.name })
+
+		// TODO: Implement this on `@nextcloud/upload`
+		const absolutPath = `${davRootPath}${getUploader().destination.path}${path}${directory.name}`
+		const davClient = davGetClient()
+		const dirExists = await davClient.exists(absolutPath)
+		if (!dirExists) {
+			logger.debug('Directory does not exist, creating it', { absolutPath })
+			await davClient.createDirectory(absolutPath, { recursive: true })
+			const stat = await davClient.stat(absolutPath, { details: true, data: davGetDefaultPropfind() }) as ResponseDataDetailed<FileStat>
+			emit('files:node:created', davResultToNode(stat.data))
+		}
+
+		const entries = await readDirectory(directory)
+		// sorted so we upload files first before starting next level
+		const promises = entries.sort((a) => a.isFile ? -1 : 1)
+			.map((file) => handleRecursiveUpload(file, `${path}${directory.name}/`))
+		return (await Promise.all(promises)).flat()
+	}
+}
+
+/**
+ * Read a directory using Filesystem API
+ * @param directory the directory to read
+ */
+function readDirectory(directory: FileSystemDirectoryEntry) {
+	const dirReader = directory.createReader()
+
+	return new Promise<FileSystemEntry[]>((resolve, reject) => {
+		const entries = [] as FileSystemEntry[]
+		const getEntries = () => {
+			dirReader.readEntries((results) => {
+				if (results.length) {
+					entries.push(...results)
+					getEntries()
+				} else {
+					resolve(entries)
+				}
+			}, (error) => {
+				reject(error)
+			})
+		}
+
+		getEntries()
+	})
+}