Replace add button with file upload dialog

app/src/lang/en-US/index.json

@@ -543,6 +543,7 @@
 	"all_files": "All Files",
 	"add_new_folder": "Add New Folder",
 	"folder_name": "Folder Name...",
+	"add_new_file": "Add New File",
 
 	"no_results": "No Results",
 	"no_results_copy": "Adjust or clear search filters to see results.",

app/src/modules/files/components/add-file/add-file.vue

@@ -0,0 +1,42 @@
+<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-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-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		parent: {
+			type: Number,
+			default: null,
+		},
+	},
+	setup(props, { emit }) {
+		const dialogActive = ref(false);
+
+		return { dialogActive, onUpload };
+
+		function onUpload() {
+			dialogActive.value = false;
+			emit('upload');
+		}
+	},
+});
+</script>

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

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

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

@@ -65,9 +65,7 @@
 				<v-icon name="edit" />
 			</v-button>
 
-			<v-button rounded icon :to="addNewLink">
-				<v-icon name="add" />
-			</v-button>
+			<add-file @upload="refresh" />
 		</template>
 
 		<template #navigation>
@@ -111,6 +109,7 @@ 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';
@@ -121,14 +120,14 @@ type Item = {
 
 export default defineComponent({
 	name: 'files-browse',
-	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder, SearchInput, FolderPicker },
+	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder, AddFile, SearchInput, FolderPicker },
 	props: {},
 	setup() {
 		const layout = ref<LayoutComponent | null>(null);
 		const selection = ref<Item[]>([]);
 
 		const { viewType, viewOptions, viewQuery, filters, searchQuery } = usePreset(ref('directus_files'));
-		const { addNewLink, batchLink } = useLinks();
+		const { batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb } = useBreadcrumb();
 
@@ -179,7 +178,6 @@ export default defineComponent({
 		const { moveToDialogActive, moveToFolder, moving, selectedFolder } = useMovetoFolder();
 
 		return {
-			addNewLink,
 			batchDelete,
 			batchLink,
 			breadcrumb,
@@ -199,6 +197,7 @@ export default defineComponent({
 			moveToFolder,
 			moving,
 			selectedFolder,
+			refresh,
 		};
 
 		function useBatchDelete() {
@@ -225,16 +224,12 @@ export default defineComponent({
 		}
 
 		function useLinks() {
-			const addNewLink = computed<string>(() => {
-				return `/files/+`;
-			});
-
 			const batchLink = computed<string>(() => {
 				const batchPrimaryKeys = selection.value;
 				return `/files/${batchPrimaryKeys}`;
 			});
 
-			return { addNewLink, batchLink };
+			return { batchLink };
 		}
 
 		function useBreadcrumb() {
@@ -273,6 +268,10 @@ export default defineComponent({
 				}
 			}
 		}
+
+		function refresh() {
+			layout.value?.refresh();
+		}
 	},
 });
 </script>