add ability to replace file

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

@@ -442,6 +442,8 @@
 	"zoom": "Zoom",
 	"download": "Download",
 	"open": "Open",
+	"or": "or",
+	"replace": "Replace",
 
 	"foreground_color": "Foreground Color",
 	"background_color": "Background Color",
@@ -786,6 +788,7 @@
 	"create_folder": "Create Folder",
 	"folder_name": "Folder Name...",
 	"add_file": "Add File",
+	"replace_file": "Replace File",
 
 	"no_results": "No Results",
 	"no_results_copy": "Adjust or clear search filters to see results.",

app/src/modules/files/components/file-info-sidebar-detail.vue

@@ -64,6 +64,15 @@
 				</dd>
 			</div>
 
+			<div>
+				<dt>{{ $t('file') }}</dt>
+				<dd>
+					<button @click="$emit('open-file')">{{ $t('open') }}</button>
+					{{ $t('or') }}
+					<button @click="$emit('replace-file')">{{ $t('replace') }}</button>
+				</dd>
+			</div>
+
 			<div>
 				<dt>{{ $t('folder') }}</dt>
 				<dd>

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

@@ -0,0 +1,81 @@
+<template>
+	<v-dialog :active="active" @toggle="$emit('toggle', false)" @esc="$emit('toggle', false)">
+		<v-card>
+			<v-card-title>{{ $t('replace_file') }}</v-card-title>
+			<v-card-text>
+				<v-upload :preset="preset" @input="replaceFile" from-url />
+			</v-card-text>
+			<v-card-actions>
+				<v-button secondary @click="$emit('toggle', false)">{{ $t('done') }}</v-button>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+import api from '@/api';
+import router from '@/router';
+import { PropType } from 'vue';
+
+export default defineComponent({
+	model: {
+		prop: 'active',
+		event: 'toggle',
+	},
+	props: {
+		active: {
+			type: Boolean,
+			default: false,
+		},
+		file: {
+			type: Object,
+			default: () => ({}),
+		},
+		preset: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	setup(props) {
+		const dialogActive = ref(false);
+		const saving = ref(false);
+		const savingError = ref(null);
+
+		return { replaceFile, dialogActive, saving, savingError };
+
+		async function replaceFile(uploadedFile: any) {
+			saving.value = true;
+
+			try {
+				await api.delete(`/files/${props.file.id}`);
+
+				const newFile = await api.patch(`/files/${uploadedFile.id}`, {
+					id: props.file.id,
+					title: props.file.title,
+					description: props.file.description,
+					tags: props.file.tags,
+					location: props.file.location,
+					folder: props.file.folder,
+					filename_download: props.file.filename_download,
+				});
+				dialogActive.value = false;
+				window.location.reload();
+			} catch (err) {
+				savingError.value = err;
+			} finally {
+				saving.value = false;
+			}
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.add-new {
+	--v-button-background-color: var(--primary-25);
+	--v-button-color: var(--primary);
+	--v-button-background-color-hover: var(--primary-50);
+	--v-button-color-hover: var(--primary);
+}
+</style>

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

@@ -156,7 +156,11 @@
 		</v-dialog>
 
 		<template #sidebar>
-			<file-info-sidebar-detail :file="item" @move-folder="moveToDialogActive = true" />
+			<file-info-sidebar-detail
+				:file="item"
+				@move-folder="moveToDialogActive = true"
+				@replace-file="replaceFileDialogActive = true"
+			/>
 			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_files"
@@ -169,6 +173,8 @@
 				:primary-key="primaryKey"
 			/>
 		</template>
+
+		<replace-file v-model="replaceFileDialogActive" :file="item" />
 	</private-view>
 </template>
 
@@ -194,6 +200,7 @@ import api from '@/api';
 import getRootPath from '@/utils/get-root-path';
 import FilesNotFound from './not-found.vue';
 import useShortcut from '@/composables/use-shortcut';
+import ReplaceFile from '../components/replace-file.vue';
 
 type Values = {
 	[field: string]: any;
@@ -224,6 +231,7 @@ export default defineComponent({
 		FileInfoSidebarDetail,
 		FolderPicker,
 		FilesNotFound,
+		ReplaceFile,
 	},
 	props: {
 		primaryKey: {
@@ -236,6 +244,7 @@ export default defineComponent({
 		const { primaryKey } = toRefs(props);
 		const { breadcrumb } = useBreadcrumb();
 		const fieldsStore = useFieldsStore();
+		const replaceFileDialogActive = ref(false);
 
 		const revisionsDrawerDetail = ref<Vue | null>(null);
 
@@ -335,6 +344,7 @@ export default defineComponent({
 			fileSrc,
 			form,
 			to,
+			replaceFileDialogActive,
 		};
 
 		function changeCacheBuster() {