Merge pull request #39893 from nextcloud/fix/stable27-filepicker-ref

[stable27] Fix smart picker integration of new Vue based file picker

2 files changed, 22 insertions, 63 deletions

diff --git a/apps/files/src/reference-files.js b/apps/files/src/reference-files.js
index db563200cd0..a25642c4173 100644
--- a/apps/files/src/reference-files.js
+++ b/apps/files/src/reference-files.js
@@ -20,6 +20,7 @@
  */
 
 import Vue from 'vue'
+import { getRequestToken } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
 
 import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Components/NcRichText.js'
@@ -27,6 +28,9 @@ import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult
 import FileWidget from './views/ReferenceFileWidget.vue'
 import FileReferencePickerElement from './views/FileReferencePickerElement.vue'
 
+// eslint-disable-next-line camelcase
+__webpack_nonce__ = btoa(getRequestToken())
+
 Vue.mixin({
 	methods: {
 		t,
diff --git a/apps/files/src/views/FileReferencePickerElement.vue b/apps/files/src/views/FileReferencePickerElement.vue
index 0aa6678f121..6e0e8d9bc10 100644
--- a/apps/files/src/views/FileReferencePickerElement.vue
+++ b/apps/files/src/views/FileReferencePickerElement.vue
@@ -2,6 +2,7 @@
   - @copyright Copyright (c) 2023 Julius Härtl <jus@bitgrid.net>
   -
   - @author Julius Härtl <jus@bitgrid.net>
+  - @author Ferdinand Thiessen <opensource@fthiessen.de>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -20,15 +21,20 @@
   -->
 
 <template>
-	<div ref="picker" class="reference-file-picker" />
+	<FilePicker :buttons="buttons"
+		:container="null"
+		:name="t('files', 'Select file or folder to link to')"
+		:multiselect="false"
+		@close="$emit('cancel')" />
 </template>
 
 <script>
-import { FilePickerType } from '@nextcloud/dialogs'
+import { FilePickerVue } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
 export default {
 	name: 'FileReferencePickerElement',
 	components: {
+		FilePicker: FilePickerVue,
 	},
 	props: {
 		providerId: {
@@ -40,38 +46,18 @@ export default {
 			default: false,
 		},
 	},
-	mounted() {
-		this.openFilePicker()
-		window.addEventListener('click', this.onWindowClick)
-	},
-	beforeDestroy() {
-		window.removeEventListener('click', this.onWindowClick)
-	},
-	methods: {
-		onWindowClick(e) {
-			if (e.target.tagName === 'A' && e.target.classList.contains('oc-dialog-close')) {
-				this.$emit('cancel')
-			}
-		},
-		async openFilePicker() {
-			OC.dialogs.filepicker(
-				t('files', 'Select file or folder to link to'),
-				(file) => {
-					const client = OC.Files.getClient()
-					client.getFileInfo(file).then((_status, fileInfo) => {
-						this.submit(fileInfo.id)
-					})
-				},
-				false, // multiselect
-				[], // mime filter
-				false, // modal
-				FilePickerType.Choose, // type
-				'',
+	data() {
+		return {
+			buttons: [
 				{
-					target: this.$refs.picker,
+					label: t('files', 'Choose'),
+					type: 'primary',
+					callback: (node) => this.submit(node.fileid),
 				},
-			)
-		},
+			],
+		}
+	},
+	methods: {
 		submit(fileId) {
 			const fileLink = window.location.protocol + '//' + window.location.host
 				+ generateUrl('/f/{fileId}', { fileId })
@@ -80,34 +66,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped lang="scss">
-.reference-file-picker {
-	flex-grow: 1;
-	padding: 12px 16px 16px 16px;
-
-	&:deep(.oc-dialog) {
-		transform: none !important;
-		box-shadow: none !important;
-		flex-grow: 1 !important;
-		position: static !important;
-		width: 100% !important;
-		height: auto !important;
-		padding: 0 !important;
-		max-width: initial;
-
-		.oc-dialog-close {
-			display: none;
-		}
-
-		.oc-dialog-buttonrow.onebutton.aside {
-			position: absolute;
-			padding: 12px 32px;
-		}
-
-		.oc-dialog-content {
-			max-width: 100% !important;
-		}
-	}
-}
-</style>