From a885c7b86811d6877a2abb75bd1b668ff490c0cc Mon Sep 17 00:00:00 2001
From: Daniel Biegler <DanielBiegler@users.noreply.github.com>
Date: Tue, 8 Aug 2023 20:36:08 +0200
Subject: [PATCH] Add file preview to m2o-fields if the relation is
 directus_files (#19374)

* add file preview to m2o-fields if the relation is directus_files

* add changeset

* move check to useFile instead of relatedCollection
---
 .changeset/dry-lies-juggle.md                    | 5 +++++
 app/src/views/private/components/drawer-item.vue | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/dry-lies-juggle.md

diff --git a/.changeset/dry-lies-juggle.md b/.changeset/dry-lies-juggle.md
new file mode 100644
index 0000000000..4ed6102075
--- /dev/null
+++ b/.changeset/dry-lies-juggle.md
@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Added file preview to the drawer if the relation is directus_files
diff --git a/app/src/views/private/components/drawer-item.vue b/app/src/views/private/components/drawer-item.vue
index e031c0a341..1e4ed9f36b 100644
--- a/app/src/views/private/components/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item.vue
@@ -21,7 +21,7 @@
 
 		<div class="drawer-item-content">
 			<file-preview
-				v-if="junctionField && file"
+				v-if="file"
 				:src="file.src"
 				:mime="file.type"
 				:width="file.width"
@@ -237,12 +237,12 @@ const { file } = useFile();
 
 function useFile() {
 	const isDirectusFiles = computed(() => {
-		return relatedCollection.value === 'directus_files';
+		return props.collection === 'directus_files' || relatedCollection.value === 'directus_files';
 	});
 
 	const file = computed(() => {
-		if (isDirectusFiles.value === false || !initialValues.value || !props.junctionField) return null;
-		const fileData = initialValues.value?.[props.junctionField];
+		if (isDirectusFiles.value === false || !initialValues.value) return null;
+		const fileData = props.junctionField ? initialValues.value?.[props.junctionField] : initialValues.value;
 		if (!fileData) return null;
 
 		const src = `assets/${fileData.id}?key=system-large-contain`;