feat(files): Allow to upload folders

Signed-off-by: Ferdinand Thiessen <[email protected]>

apps/files/src/views/FilesList.vue

@@ -37,10 +37,12 @@
 
 					<!-- Uploader -->
 					<UploadPicker v-else-if="currentFolder"
-						:content="dirContents"
-						:destination="currentFolder"
-						:multiple="true"
+						allow-folders
 						class="files-list__header-upload-button"
+						:content="getContent"
+						:destination="currentFolder"
+						:forbidden-characters="forbiddenCharacters"
+						multiple
 						@failed="onUploadFail"
 						@uploaded="onUpload" />
 				</template>
@@ -79,9 +81,11 @@
 			<template v-if="dir !== '/'" #action>
 				<!-- Uploader -->
 				<UploadPicker v-if="currentFolder && canUpload && !isQuotaExceeded"
-					:content="dirContents"
-					:destination="currentFolder"
+					allow-folders
 					class="files-list__header-upload-button"
+					:content="getContent"
+					:destination="currentFolder"
+					:forbidden-characters="forbiddenCharacters"
 					multiple
 					@failed="onUploadFail"
 					@uploaded="onUpload" />
@@ -118,10 +122,10 @@ import { getCapabilities } from '@nextcloud/capabilities'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { Folder, Node, Permission } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
-import { join, dirname } from 'path'
-import { showError } from '@nextcloud/dialogs'
+import { join, dirname, normalize } from 'path'
+import { showError, showWarning } from '@nextcloud/dialogs'
 import { Type } from '@nextcloud/sharing'
-import { UploadPicker } from '@nextcloud/upload'
+import { UploadPicker, UploadStatus } from '@nextcloud/upload'
 import { loadState } from '@nextcloud/initial-state'
 import { defineComponent } from 'vue'
 
@@ -188,6 +192,7 @@ export default defineComponent({
 		const viewConfigStore = useViewConfigStore()
 
 		const enableGridView = (loadState('core', 'config', [])['enable_non-accessible_features'] ?? true)
+		const forbiddenCharacters = loadState<string[]>('files', 'forbiddenCharacters', [])
 
 		return {
 			filesStore,
@@ -196,9 +201,10 @@ export default defineComponent({
 			uploaderStore,
 			userConfigStore,
 			viewConfigStore,
-			enableGridView,
 
 			// non reactive data
+			enableGridView,
+			forbiddenCharacters,
 			Type,
 		}
 	},
@@ -224,6 +230,19 @@ export default defineComponent({
 			}, 500)
 		},
 
+		/**
+		 * Get a callback function for the uploader to fetch directory contents for conflict resolution
+		 */
+		getContent() {
+			const view = this.currentView
+			return async (path?: string) => {
+				// as the path is allowed to be undefined we need to normalize the path ('//' to '/')
+				const normalizedPath = normalize(`${this.currentFolder?.path ?? ''}/${path ?? ''}`)
+				// use the current view to fetch the content for the requested path
+				return (await view.getContents(normalizedPath)).contents
+			}
+		},
+
 		userConfig(): UserConfig {
 			return this.userConfigStore.userConfig
 		},
@@ -590,8 +609,7 @@ export default defineComponent({
 		onUpload(upload: Upload) {
 			// Let's only refresh the current Folder
 			// Navigating to a different folder will refresh it anyway
-			const destinationSource = dirname(upload.source)
-			const needsRefresh = destinationSource === this.currentFolder?.source
+			const needsRefresh = dirname(upload.source) === this.currentFolder!.source
 
 			// TODO: fetch uploaded files data only
 			// Use parseInt(upload.response?.headers?.['oc-fileid']) to get the fileid
@@ -604,6 +622,11 @@ export default defineComponent({
 		async onUploadFail(upload: Upload) {
 			const status = upload.response?.status || 0
 
+			if (upload.status === UploadStatus.CANCELLED) {
+				showWarning(t('files', 'Upload was cancelled by user'))
+				return
+			}
+
 			// Check known status codes
 			if (status === 507) {
 				showError(t('files', 'Not enough free space'))

package.json

@@ -57,7 +57,7 @@
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^3.0.0",
     "@nextcloud/sharing": "^0.1.0",
-    "@nextcloud/upload": "^1.1.1",
+    "@nextcloud/upload": "^1.3.0",
     "@nextcloud/vue": "^8.11.2",
     "@simplewebauthn/browser": "^10.0.0",
     "@skjnldsv/sanitize-svg": "^1.0.2",
@@ -113,7 +113,7 @@
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",
     "vuex-router-sync": "^5.0.0",
-    "webdav": "^5.5.0"
+    "webdav": "^5.6.0"
   },
   "devDependencies": {
     "@babel/node": "^7.22.10",