diff --git a/apps/files_sharing/src/new/newFileRequest.ts b/apps/files_sharing/src/new/newFileRequest.ts
index c069bf5cdea..9dd874851ed 100644
--- a/apps/files_sharing/src/new/newFileRequest.ts
+++ b/apps/files_sharing/src/new/newFileRequest.ts
@@ -4,15 +4,16 @@
  */
 import type { Entry, Folder, Node } from '@nextcloud/files'
 
+import { defineAsyncComponent } from 'vue'
+import { spawnDialog } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import FileUploadSvg from '@mdi/svg/svg/file-upload.svg?raw'
-import Vue, { defineAsyncComponent } from 'vue'
+
 import Config from '../services/ConfigService'
+const sharingConfig = new Config()
 
 const NewFileRequestDialogVue = defineAsyncComponent(() => import('../components/NewFileRequestDialog.vue'))
 
-const sharingConfig = new Config()
-
 export const EntryId = 'file-request'
 
 export const entry = {
@@ -25,29 +26,9 @@ export const entry = {
 		return sharingConfig.isPublicShareAllowed
 	},
 	async handler(context: Folder, content: Node[]) {
-		// Create document root
-		const mountingPoint = document.createElement('div')
-		mountingPoint.id = 'file-request-dialog'
-		document.body.appendChild(mountingPoint)
-
-		// Init vue app
-		const NewFileRequestDialog = new Vue({
-			name: 'NewFileRequestDialogRoot',
-			render: (h) => h(
-				NewFileRequestDialogVue,
-				{
-					props: {
-						context,
-						content,
-					},
-					on: {
-						close: () => {
-							NewFileRequestDialog.$destroy()
-						},
-					},
-				},
-			),
-			el: mountingPoint,
+		spawnDialog(NewFileRequestDialogVue, {
+			context,
+			content,
 		})
 	},
 } as Entry