fix: use file picker component directly

Signed-off-by: Elizabeth Danzberger <[email protected]>

src/view/DocumentTargetPicker.vue

@@ -42,7 +42,8 @@
 </template>
 
 <script>
-import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
+import { spawnDialog } from '@nextcloud/dialogs'
 import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -87,26 +88,34 @@ export default {
 		window.removeEventListener('click', this.onWindowClick)
 	},
 	methods: {
+		t,
 		onWindowClick(e) {
 			if (e.target.tagName === 'A' && e.target.classList.contains('oc-dialog-close')) {
 				this.$emit('cancel')
 			}
 		},
 		async openFilePicker() {
-			await getFilePickerBuilder(t('files', 'Select file or folder to link to'))
-				.setMimeTypeFilter(getCapabilities().mimetypes)
-				.addButton({
-					label: t('richdocuments', 'Insert image'),
+			const filePickerButtons = [
+				{
+					label: t('richdocuments', 'Select file'),
 					callback: (files) => {
 						const file = files[0]
 						this.fileId = file.fileid
 						this.filePath = file.path
 						this.fetchReferences()
 					},
-				})
-				.setContainer(this.$refs.picker)
-				.build()
-				.pick()
+					type: 'primary',
+				},
+			]
+
+			spawnDialog(FilePicker, {
+				name: t('files', 'Select file or folder to link to'),
+				multiselect: false,
+				mimetypeFilter: getCapabilities().mimetypes,
+				allowPickDirectory: false,
+				buttons: filePickerButtons,
+				container: '.office-target-picker',
+			})
 		},
 		setTarget(entry) {
 			this.target = entry.id