feat(files): add uploader

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

apps/files/src/components/BreadCrumbs.vue

@@ -11,6 +11,11 @@
 				<Home :size="20" />
 			</template>
 		</NcBreadcrumb>
+
+		<!-- Forward the actions slot -->
+		<template #actions>
+			<slot name="actions" />
+		</template>
 	</NcBreadcrumbs>
 </template>
 

apps/files/src/components/FilesListHeader.vue

@@ -50,7 +50,6 @@ export default {
 	},
 	computed: {
 		enabled() {
-			console.debug('Enabled', this.header.id)
 			return this.header.enabled(this.currentFolder, this.currentView)
 		},
 	},

apps/files/src/store/uploader.ts

@@ -0,0 +1,32 @@
+/**
+ * @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @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 { defineStore } from 'pinia'
+import type { UploaderStore } from '../types'
+
+import { getUploader } from '@nextcloud/upload'
+const uploader = getUploader()
+
+export const useUploaderStore = defineStore('uploader', {
+	state: () => ({
+		queue: uploader.queue,
+	} as UploaderStore),
+})

apps/files/src/types.ts

@@ -100,3 +100,7 @@ export interface RenamingStore {
 	renamingNode?: Node
 	newName: string
 }
+
+// Uploader store
+export interface UploaderStore {
+}

apps/files/src/views/FilesList.vue

@@ -23,7 +23,15 @@
 	<NcAppContent data-cy-files-content>
 		<div class="files-list__header">
 			<!-- Current folder breadcrumbs -->
-			<BreadCrumbs :path="dir" @reload="fetchContent" />
+			<BreadCrumbs :path="dir" @reload="fetchContent">
+				<template #actions>
+					<!-- Uploader -->
+					<UploadPicker v-if="currentFolder"
+						:destination="currentFolder"
+						:multiple="true"
+						@uploaded="onUpload" />
+				</template>
+			</BreadCrumbs>
 
 			<!-- Secondary loading indicator -->
 			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
@@ -71,6 +79,7 @@ import { Folder, Node } from '@nextcloud/files'
 import { join } from 'path'
 import { orderBy } from 'natural-orderby'
 import { translate } from '@nextcloud/l10n'
+import { UploadPicker } from '@nextcloud/upload'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
@@ -99,6 +108,7 @@ export default Vue.extend({
 		NcEmptyContent,
 		NcIconSvgWrapper,
 		NcLoadingIcon,
+		UploadPicker,
 	},
 
 	mixins: [
@@ -310,10 +320,14 @@ export default Vue.extend({
 		 * @param {number} fileId the file id to get
 		 * @return {Folder|File}
 		 */
-		 getNode(fileId) {
+		getNode(fileId) {
 			return this.filesStore.getNode(fileId)
 		},
 
+		onUpload(...args) {
+			console.debug(args)
+		},
+
 		t: translate,
 	},
 })

lib/private/Preview/MimeIconProvider.php

@@ -82,7 +82,7 @@ private function searchfileName(string $fileName): null|string {
 			}
 		}
 
-		// Previously, we used to pass thi through Theming
+		// Previously, we used to pass this through Theming
 		// But it was only used to colour icons containing
 		// 0082c9. Since with vue we moved to inline svg icons,
 		// we can just use the default core icons.

package.json

@@ -54,6 +54,7 @@
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^2.1.2",
     "@nextcloud/sharing": "^0.1.0",
+    "@nextcloud/upload": "^1.0.0-beta.11",
     "@nextcloud/vue": "^8.0.0-beta.2",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "@skjnldsv/sanitize-svg": "^1.0.2",