Change new file to subroute

app/src/modules/files/components/add-file/index.ts

@@ -1,5 +0,0 @@
-import AddFile from './add-file.vue';
-
-export { AddFile };
-export default AddFile;
-

app/src/modules/files/index.ts

@@ -1,6 +1,7 @@
 import { defineModule } from '@/modules/define';
 import FilesBrowse from './routes/browse/';
 import FilesDetail from './routes/detail/';
+import FilesAddNew from './routes/add-new/';
 
 export default defineModule(({ i18n }) => ({
 	id: 'files',
@@ -12,6 +13,15 @@ export default defineModule(({ i18n }) => ({
 			path: '/',
 			component: FilesBrowse,
 			props: true,
+			children: [
+				{
+					path: '+',
+					name: 'add-file',
+					components: {
+						addNew: FilesAddNew
+					},
+				}
+			]
 		},
 		{
 			name: 'files-detail',

app/src/modules/files/routes/add-new/add-new.vue

@@ -1,25 +1,20 @@
 <template>
-	<v-dialog v-model="dialogActive">
-		<template #activator="{ on }">
-			<v-button rounded icon class="add-new" @click="on">
-				<v-icon name="add" />
-			</v-button>
-		</template>
-
+	<v-dialog :active="dialogActive" @toggle="close">
 		<v-card>
 			<v-card-title>{{ $t('add_new_file') }}</v-card-title>
 			<v-card-text>
 				<v-upload @upload="onUpload" />
 			</v-card-text>
 			<v-card-actions>
-				<v-button secondary @click="dialogActive = false">{{ $t('cancel') }}</v-button>
+				<v-button secondary @click="close">{{ $t('cancel') }}</v-button>
 			</v-card-actions>
 		</v-card>
 	</v-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref, onMounted } from '@vue/composition-api';
+import router from '@/router';
 
 export default defineComponent({
 	props: {
@@ -31,10 +26,16 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const dialogActive = ref(false);
 
-		return { dialogActive, onUpload };
+		onMounted(() => dialogActive.value = true);
+
+		return { onUpload, close, dialogActive };
+
+		function close() {
+			dialogActive.value = false;
+			router.push('/files');
+		}
 
 		function onUpload() {
-			dialogActive.value = false;
 			emit('upload');
 		}
 	},

app/src/modules/files/routes/add-new/index.ts

@@ -0,0 +1,4 @@
+import AddNew from './add-new.vue';
+
+export { AddNew };
+export default AddNew;

app/src/modules/files/routes/browse/browse.vue

@@ -65,7 +65,9 @@
 				<v-icon name="edit" />
 			</v-button>
 
-			<add-file @upload="refresh" />
+			<v-button rounded icon class="add-new" to="/files/+">
+				<v-icon name="add" />
+			</v-button>
 		</template>
 
 		<template #navigation>
@@ -82,10 +84,12 @@
 			:view-query.sync="viewQuery"
 			:filters="filtersWithFolderAndType"
 			:search-query="searchQuery"
-			@update:filters="filters = $event"
 			:detail-route="'/files/{{primaryKey}}'"
+			@update:filters="filters = $event"
 		/>
 
+		<router-view name="addNew" />
+
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				<div class="format-markdown" v-html="marked($t('page_help_files_browse'))" />
@@ -109,7 +113,6 @@ import usePreset from '@/composables/use-collection-preset';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 import AddFolder from '../../components/add-folder';
-import AddFile from '../../components/add-file';
 import SearchInput from '@/views/private/components/search-input';
 import marked from 'marked';
 import FolderPicker from '../../components/folder-picker';
@@ -120,7 +123,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'files-browse',
-	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder, AddFile, SearchInput, FolderPicker },
+	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder, SearchInput, FolderPicker },
 	props: {},
 	setup() {
 		const layout = ref<LayoutComponent | null>(null);