redo replacing of image

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

@@ -67,16 +67,14 @@
 			<div>
 				<dt>{{ $t('file') }}</dt>
 				<dd>
-					<button @click="$emit('open-file')">{{ $t('open') }}</button>
-					{{ $t('or') }}
-					<button @click="$emit('replace-file')">{{ $t('replace') }}</button>
+					<a :href="`${getRootPath()}assets/${file.id}`" target="_blank">{{ $t('open') }}</a>
 				</dd>
 			</div>
 
 			<div>
 				<dt>{{ $t('folder') }}</dt>
 				<dd>
-					<button @click="$emit('move-folder')">{{ folder ? folder.name : $t('file_library') }}</button>
+					<router-link :to="folderLink">{{ folder ? folder.name : $t('file_library') }}</router-link>
 				</dd>
 			</div>
 
@@ -124,6 +122,7 @@ import i18n from '@/lang';
 import marked from 'marked';
 import localizedFormat from '@/utils/localized-format';
 import api from '@/api';
+import getRootPath from '@/utils/get-root-path';
 
 export default defineComponent({
 	inheritAttrs: false,
@@ -148,9 +147,20 @@ export default defineComponent({
 
 		const { creationDate, modificationDate } = useDates();
 		const { userCreated, userModified } = useUser();
-		const { folder } = useFolder();
+		const { folder, folderLink } = useFolder();
 
-		return { readableMimeType, size, creationDate, modificationDate, userCreated, userModified, folder, marked };
+		return {
+			readableMimeType,
+			size,
+			creationDate,
+			modificationDate,
+			userCreated,
+			userModified,
+			folder,
+			marked,
+			folderLink,
+			getRootPath,
+		};
 
 		function useDates() {
 			const creationDate = ref<string | null>(null);
@@ -238,16 +248,23 @@ export default defineComponent({
 
 		function useFolder() {
 			type Folder = {
-				id: number;
+				id: string;
 				name: string;
 			};
 
 			const loading = ref(false);
 			const folder = ref<Folder | null>(null);
 
+			const folderLink = computed(() => {
+				if (folder.value === null) {
+					return `/files`;
+				}
+				return `/files/?folder=${folder.value.id}`;
+			});
+
 			watch(() => props.file, fetchFolder, { immediate: true });
 
-			return { folder };
+			return { folder, folderLink };
 
 			async function fetchFolder() {
 				if (!props.file) return null;

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

@@ -1,9 +1,9 @@
 <template>
 	<v-dialog :active="active" @toggle="$emit('toggle', false)" @esc="$emit('toggle', false)">
-		<v-card>
+		<v-card v-if="file">
 			<v-card-title>{{ $t('replace_file') }}</v-card-title>
 			<v-card-text>
-				<v-upload :preset="preset" @input="replaceFile" from-url />
+				<v-upload :preset="preset" :replace-with-id="file.id" @input="uploaded" from-url />
 			</v-card-text>
 			<v-card-actions>
 				<v-button secondary @click="$emit('toggle', false)">{{ $t('done') }}</v-button>
@@ -37,35 +37,11 @@ export default defineComponent({
 			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;
-			}
+	setup(props, { emit }) {
+		return { uploaded };
+		function uploaded() {
+			emit('toggle', false);
+			emit('replaced');
 		}
 	},
 });

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

@@ -119,15 +119,13 @@
 				:width="item.width"
 				:height="item.height"
 				:title="item.title"
-				@click="previewActive = true"
+				@click="replaceFileDialogActive = true"
 			/>
 
-			<file-lightbox v-if="item" :id="item.id" v-model="previewActive" />
-
 			<image-editor
 				v-if="item && item.type.startsWith('image')"
 				:id="item.id"
-				@refresh="changeCacheBuster"
+				@refresh="refresh"
 				v-model="editActive"
 			/>
 
@@ -156,11 +154,7 @@
 		</v-dialog>
 
 		<template #sidebar>
-			<file-info-sidebar-detail
-				:file="item"
-				@move-folder="moveToDialogActive = true"
-				@replace-file="replaceFileDialogActive = true"
-			/>
+			<file-info-sidebar-detail :file="item" />
 			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_files"
@@ -174,7 +168,7 @@
 			/>
 		</template>
 
-		<replace-file v-model="replaceFileDialogActive" :file="item" />
+		<replace-file v-model="replaceFileDialogActive" @replaced="refresh" :file="item" />
 	</private-view>
 </template>
 
@@ -190,7 +184,6 @@ import SaveOptions from '@/views/private/components/save-options';
 import FilePreview from '@/views/private/components/file-preview';
 import ImageEditor from '@/views/private/components/image-editor';
 import { nanoid } from 'nanoid';
-import FileLightbox from '@/views/private/components/file-lightbox';
 import { useFieldsStore } from '@/stores/';
 import { Field } from '@/types';
 import FileInfoSidebarDetail from '../components/file-info-sidebar-detail.vue';
@@ -227,7 +220,6 @@ export default defineComponent({
 		SaveOptions,
 		FilePreview,
 		ImageEditor,
-		FileLightbox,
 		FileInfoSidebarDetail,
 		FolderPicker,
 		FilesNotFound,
@@ -265,13 +257,15 @@ export default defineComponent({
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 		const confirmDelete = ref(false);
-		const cacheBuster = ref(nanoid());
 		const editActive = ref(false);
-		const previewActive = ref(false);
 		const fileSrc = computed(() => {
-			return (
-				getRootPath() + `assets/${props.primaryKey}?cache-buster=${cacheBuster.value}&key=system-large-contain`
-			);
+			if (item.value && item.value.modified_on) {
+				return (
+					getRootPath() +
+					`assets/${props.primaryKey}?cache-buster=${item.value.modified_on}&key=system-large-contain`
+				);
+			}
+			return getRootPath() + `assets/${props.primaryKey}?key=system-large-contain`;
 		});
 
 		// These are the fields that will be prevented from showing up in the form because they'll be shown in the sidebar
@@ -327,10 +321,7 @@ export default defineComponent({
 			saveAndStay,
 			saveAsCopyAndNavigate,
 			isBatch,
-			changeCacheBuster,
-			cacheBuster,
 			editActive,
-			previewActive,
 			revisionsDrawerDetail,
 			formFields,
 			confirmLeave,
@@ -345,12 +336,9 @@ export default defineComponent({
 			form,
 			to,
 			replaceFileDialogActive,
+			refresh,
 		};
 
-		function changeCacheBuster() {
-			cacheBuster.value = nanoid();
-		}
-
 		function useBreadcrumb() {
 			const breadcrumb = computed(() => {
 				if (!item?.value?.folder) {
@@ -405,7 +393,7 @@ export default defineComponent({
 		}
 
 		function downloadFile() {
-			const filePath = getRootPath() + `assets/${props.primaryKey}`;
+			const filePath = getRootPath() + `assets/${props.primaryKey}?download=true`;
 			window.open(filePath, '_blank');
 		}
 
@@ -415,7 +403,7 @@ export default defineComponent({
 			const selectedFolder = ref<number | null>();
 
 			watch(item, () => {
-				selectedFolder.value = item.value.folder;
+				selectedFolder.value = item.value?.folder || null;
 			});
 
 			return { moveToDialogActive, moving, moveToFolder, selectedFolder };