From f8a57a09eebbf68d2624224d49ad52fcde07fef5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20K=C3=BCttner?=
 <4376726+hanneskuettner@users.noreply.github.com>
Date: Fri, 19 Apr 2024 14:35:44 +0200
Subject: [PATCH] Fix Files interface with custom junction field (#22241)

---
 .changeset/six-bags-play.md        |  5 +++++
 app/src/interfaces/files/files.vue | 14 +++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/six-bags-play.md

diff --git a/.changeset/six-bags-play.md b/.changeset/six-bags-play.md
new file mode 100644
index 0000000000..d2ca233980
--- /dev/null
+++ b/.changeset/six-bags-play.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed Files interface when used with custom junction field
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index e5a7b1715e..9025ed4e98 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -219,8 +219,9 @@ const downloadName = computed(() => {
 	const junctionField = relationInfo.value.junctionField.field;
 	const relationPkField = relationInfo.value.relatedPrimaryKeyField.field;
 
-	return displayItems.value.find((item) => get(item, [junctionField, relationPkField]))?.directus_files_id
-		?.filename_download;
+	return displayItems.value.find((item) => get(item, [junctionField, relationPkField]) === relatedPrimaryKey.value)?.[
+		junctionField
+	]?.filename_download;
 });
 
 const downloadUrl = computed(() => {
@@ -238,6 +239,13 @@ function getFilename(junctionRow: Record<string, any>) {
 	return key;
 }
 
+function getDownloadName(junctionRow: Record<string, any>) {
+	const junctionField = relationInfo.value?.junctionField.field;
+	if (!junctionField) return;
+
+	return junctionRow[junctionField]?.filename_download;
+}
+
 const customFilter = computed(() => {
 	if (!relationInfo.value) return;
 
@@ -335,7 +343,7 @@ const allowDrag = computed(
 								</v-list-item>
 								<v-list-item
 									clickable
-									:download="element.directus_files_id.filename_download"
+									:download="getDownloadName(element)"
 									:href="getAssetUrl(getFilename(element), true)"
 								>
 									<v-list-item-icon><v-icon name="download" /></v-list-item-icon>