diff --git a/app/src/interfaces/file-image/file-image.vue b/app/src/interfaces/file-image/file-image.vue
index 4730518136..4a0557eb4a 100644
--- a/app/src/interfaces/file-image/file-image.vue
+++ b/app/src/interfaces/file-image/file-image.vue
@@ -35,8 +35,14 @@
 				<v-button v-tooltip="t('zoom')" icon rounded @click="lightboxActive = true">
 					<v-icon name="zoom_in" />
 				</v-button>
-				<v-button v-tooltip="t('download')" icon rounded :href="downloadSrc" :download="image.filename_download">
-					<v-icon name="file_download" />
+				<v-button
+					v-tooltip="t('download')"
+					icon
+					rounded
+					:href="getAssetUrl(image.id, true)"
+					:download="image.filename_download"
+				>
+					<v-icon name="download" />
 				</v-button>
 				<v-button v-tooltip="t('edit')" icon rounded @click="editImageDetails = true">
 					<v-icon name="open_in_new" />
@@ -61,7 +67,13 @@
 				:primary-key="image.id"
 				:edits="edits"
 				@input="update"
-			/>
+			>
+				<template #actions>
+					<v-button secondary rounded icon :download="image.filename_download" :href="getAssetUrl(image.id, true)">
+						<v-icon name="download" />
+					</v-button>
+				</template>
+			</drawer-item>
 
 			<image-editor v-if="!disabled && image" :id="image.id" v-model="editImageEditor" @refresh="refresh" />
 
@@ -76,7 +88,7 @@ import api, { addTokenToURL } from '@/api';
 import { useRelationM2O } from '@/composables/use-relation-m2o';
 import { RelationQuerySingle, useRelationSingle } from '@/composables/use-relation-single';
 import { formatFilesize } from '@/utils/format-filesize';
-import { getRootPath } from '@/utils/get-root-path';
+import { getAssetUrl } from '@/utils/get-asset-url';
 import { readableMimeType } from '@/utils/readable-mime-type';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
 import FileLightbox from '@/views/private/components/file-lightbox.vue';
@@ -142,11 +154,6 @@ const src = computed(() => {
 
 const ext = computed(() => (image.value ? readableMimeType(image.value.type, true) : 'unknown'));
 
-const downloadSrc = computed(() => {
-	if (!image.value) return null;
-	return addTokenToURL(getRootPath() + 'assets/' + image.value.id);
-});
-
 const meta = computed(() => {
 	if (!image.value) return null;
 	const { filesize, width, height, type } = image.value;
@@ -238,74 +245,76 @@ img {
 	}
 }
 
-.shadow {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	z-index: 2;
-	width: 100%;
-	height: 40px;
-	overflow: hidden;
-	line-height: 1;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	background: linear-gradient(180deg, rgb(38 50 56 / 0) 0%, rgb(38 50 56 / 0.25) 100%);
-	transition: height var(--fast) var(--transition);
-}
+.image-preview {
+	.shadow {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		z-index: 2;
+		width: 100%;
+		height: 40px;
+		overflow: hidden;
+		line-height: 1;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		background: linear-gradient(180deg, rgb(38 50 56 / 0) 0%, rgb(38 50 56 / 0.25) 100%);
+		transition: height var(--fast) var(--transition);
+	}
 
-.actions {
-	--v-button-color: var(--foreground-subdued);
-	--v-button-background-color: var(--white);
-	--v-button-color-hover: var(--foreground-normal);
-	--v-button-background-color-hover: var(--white);
+	.actions {
+		--v-button-color: var(--foreground-subdued);
+		--v-button-background-color: var(--white);
+		--v-button-color-hover: var(--foreground-normal);
+		--v-button-background-color-hover: var(--white);
 
-	position: absolute;
-	top: calc(50% - 32px);
-	left: 0;
-	z-index: 3;
-	display: flex;
-	justify-content: center;
-	width: 100%;
+		position: absolute;
+		top: calc(50% - 32px);
+		left: 0;
+		z-index: 3;
+		display: flex;
+		justify-content: center;
+		width: 100%;
 
-	.v-button {
-		margin-right: 12px;
-		transform: translateY(10px);
-		opacity: 0;
-		transition: var(--medium) var(--transition);
-		transition-property: opacity transform;
+		.v-button {
+			margin-right: 12px;
+			transform: translateY(10px);
+			opacity: 0;
+			transition: var(--medium) var(--transition);
+			transition-property: opacity transform;
 
-		@for $i from 0 through 4 {
-			&:nth-of-type(#{$i + 1}) {
-				transition-delay: $i * 25ms;
+			@for $i from 0 through 4 {
+				&:nth-of-type(#{$i + 1}) {
+					transition-delay: $i * 25ms;
+				}
 			}
 		}
+
+		.v-button:last-child {
+			margin-right: 0px;
+		}
 	}
 
-	.v-button:last-child {
-		margin-right: 0px;
+	.info {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		z-index: 3;
+		width: 100%;
+		padding: 8px 12px;
+		line-height: 1.2;
 	}
-}
 
-.info {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	z-index: 3;
-	width: 100%;
-	padding: 8px 12px;
-	line-height: 1.2;
-}
+	.title {
+		color: var(--white);
+	}
 
-.title {
-	color: var(--white);
-}
-
-.meta {
-	height: 17px;
-	max-height: 0;
-	overflow: hidden;
-	color: rgb(255 255 255 / 0.75);
-	transition: max-height var(--fast) var(--transition);
+	.meta {
+		height: 17px;
+		max-height: 0;
+		overflow: hidden;
+		color: rgb(255 255 255 / 0.75);
+		transition: max-height var(--fast) var(--transition);
+	}
 }
 
 .image-preview:focus-within,
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index ad9b096311..fea17a7c4c 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -46,7 +46,7 @@
 
 			<v-list>
 				<template v-if="file">
-					<v-list-item :download="file.filename_download" :href="downloadURL">
+					<v-list-item clickable :download="file.filename_download" :href="getAssetUrl(file.id, true)">
 						<v-list-item-icon><v-icon name="get_app" /></v-list-item-icon>
 						<v-list-item-content>{{ t('download_file') }}</v-list-item-content>
 					</v-list-item>
@@ -86,7 +86,13 @@
 			:edits="edits"
 			:disabled="disabled"
 			@input="update"
-		/>
+		>
+			<template #actions>
+				<v-button secondary rounded icon :download="file.filename_download" :href="getAssetUrl(file.id, true)">
+					<v-icon name="download" />
+				</v-button>
+			</template>
+		</drawer-item>
 
 		<v-dialog
 			:model-value="activeDialog === 'upload'"
@@ -141,7 +147,8 @@
 import { useI18n } from 'vue-i18n';
 import { ref, computed, toRefs } from 'vue';
 import DrawerCollection from '@/views/private/components/drawer-collection.vue';
-import api, { addTokenToURL } from '@/api';
+import api from '@/api';
+import { getAssetUrl } from '@/utils/get-asset-url';
 import { readableMimeType } from '@/utils/readable-mime-type';
 import { unexpectedError } from '@/utils/unexpected-error';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
@@ -149,7 +156,6 @@ import { addQueryToPath } from '@/utils/add-query-to-path';
 import { useRelationM2O } from '@/composables/use-relation-m2o';
 import { useRelationSingle, RelationQuerySingle } from '@/composables/use-relation-single';
 import { Filter } from '@directus/shared/types';
-import { getRootPath } from '@/utils/get-root-path';
 
 type FileInfo = {
 	id: string;
@@ -208,10 +214,6 @@ const assetURL = computed(() => {
 	return '/assets/' + id;
 });
 
-const downloadURL = computed(() => {
-	return addTokenToURL(getRootPath() + assetURL.value.slice(1));
-});
-
 const imageThumbnail = computed(() => {
 	if (file.value === null || props.value === null) return null;
 	if (file.value.type.includes('svg')) return assetURL.value;
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index 0875ca2848..920ca0c7ff 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -47,11 +47,15 @@
 							</template>
 
 							<v-list>
-								<v-list-item clickable :href="getUrl(element)">
+								<v-list-item clickable :href="getAssetUrl(getFilename(element))">
 									<v-list-item-icon><v-icon name="launch" /></v-list-item-icon>
 									<v-list-item-content>{{ t('open_file_in_tab') }}</v-list-item-content>
 								</v-list-item>
-								<v-list-item clickable :href="getUrl(element, true)">
+								<v-list-item
+									clickable
+									:download="element.directus_files_id.filename_download"
+									:href="getAssetUrl(getFilename(element), true)"
+								>
 									<v-list-item-icon><v-icon name="download" /></v-list-item-icon>
 									<v-list-item-content>{{ t('download_file') }}</v-list-item-content>
 								</v-list-item>
@@ -89,7 +93,7 @@
 					secondary
 					rounded
 					icon
-					download
+					:download="downloadName"
 					:href="downloadUrl"
 				>
 					<v-icon name="download" />
@@ -129,12 +133,11 @@ import { useI18n } from 'vue-i18n';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
 import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import Draggable from 'vuedraggable';
+import { getAssetUrl } from '@/utils/get-asset-url';
 import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { get, clamp, isEmpty } from 'lodash';
 import { usePermissionsStore } from '@/stores/permissions';
 import { useUserStore } from '@/stores/user';
-import { addTokenToURL } from '@/api';
-import { getRootPath } from '@/utils/get-root-path';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
 import { Filter } from '@directus/shared/types';
 
@@ -202,7 +205,7 @@ const templateWithDefaults = computed(() => {
 
 const fields = computed(() =>
 	adjustFieldsForDisplays(
-		getFieldsFromTemplate(templateWithDefaults.value),
+		[...getFieldsFromTemplate(templateWithDefaults.value), `${relationInfo.value?.relation.field}.filename_download`],
 		relationInfo.value?.junctionCollection.collection ?? ''
 	)
 );
@@ -317,23 +320,28 @@ function onSelect(selected: string[]) {
 	select(selected.filter((id) => selectedPrimaryKeys.value.includes(id) === false));
 }
 
-const downloadUrl = computed(() => {
+const downloadName = computed(() => {
 	if (relatedPrimaryKey.value === null || relationInfo.value?.relatedCollection.collection !== 'directus_files') return;
-	return addTokenToURL(getRootPath() + `assets/${relatedPrimaryKey.value}?download`);
+	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;
 });
 
-function getUrl(junctionRow: Record<string, any>, addDownload?: boolean) {
+const downloadUrl = computed(() => {
+	if (relatedPrimaryKey.value === null || relationInfo.value?.relatedCollection.collection !== 'directus_files') return;
+	return getAssetUrl(String(relatedPrimaryKey.value), true);
+});
+
+function getFilename(junctionRow: Record<string, any>) {
 	const junctionField = relationInfo.value?.junctionField.field;
 	if (!junctionField) return;
 
 	const key = junctionRow[junctionField]?.id ?? junctionRow[junctionField] ?? null;
 	if (!key) return null;
 
-	if (addDownload) {
-		return addTokenToURL(getRootPath() + `assets/${key}?download`);
-	}
-
-	return addTokenToURL(getRootPath() + `assets/${key}`);
+	return key;
 }
 
 const customFilter = computed(() => {
diff --git a/app/src/modules/files/routes/item.vue b/app/src/modules/files/routes/item.vue
index 9e4a20773c..ed88307685 100644
--- a/app/src/modules/files/routes/item.vue
+++ b/app/src/modules/files/routes/item.vue
@@ -65,9 +65,15 @@
 					</v-card-actions>
 				</v-card>
 			</v-dialog>
-
-			<v-button v-tooltip.bottom="t('download')" rounded icon secondary @click="downloadFile">
-				<v-icon name="file_download" />
+			<v-button
+				v-tooltip.bottom="t('download')"
+				secondary
+				icon
+				rounded
+				:download="item?.filename_download"
+				:href="getAssetUrl(props.primaryKey, true)"
+			>
+				<v-icon name="download" />
 			</v-button>
 
 			<v-button
@@ -176,12 +182,12 @@
 </template>
 
 <script lang="ts" setup>
-import api, { addTokenToURL } from '@/api';
+import api from '@/api';
 import { useEditsGuard } from '@/composables/use-edits-guard';
 import { useItem } from '@/composables/use-item';
 import { usePermissions } from '@/composables/use-permissions';
 import { useShortcut } from '@/composables/use-shortcut';
-import { getRootPath } from '@/utils/get-root-path';
+import { getAssetUrl } from '@/utils/get-asset-url';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail.vue';
@@ -349,11 +355,6 @@ function discardAndStay() {
 	confirmLeave.value = false;
 }
 
-function downloadFile() {
-	const filePath = addTokenToURL(getRootPath() + `assets/${props.primaryKey}?download`);
-	window.open(filePath, '_blank');
-}
-
 function useMovetoFolder() {
 	const moveToDialogActive = ref(false);
 	const moving = ref(false);
diff --git a/app/src/utils/get-asset-url.test.ts b/app/src/utils/get-asset-url.test.ts
new file mode 100644
index 0000000000..c55ea29a2d
--- /dev/null
+++ b/app/src/utils/get-asset-url.test.ts
@@ -0,0 +1,31 @@
+import { test, expect, vi } from 'vitest';
+
+import { cryptoStub } from '@/__utils__/crypto';
+vi.stubGlobal('crypto', cryptoStub);
+
+import { addTokenToURL } from '@/api';
+import { getAssetUrl } from '@/utils/get-asset-url';
+
+test('Get asset url', () => {
+	global.window.location.href = 'https://directus.io/admin/test/';
+	const output = getAssetUrl('test.jpg');
+	expect(output).toBe(`https://directus.io${addTokenToURL('/assets/test.jpg')}`);
+});
+
+test('Get asset url for download', () => {
+	global.window.location.href = 'https://directus.io/admin/test/';
+	const output = getAssetUrl('test.jpg', true);
+	expect(output).toBe(`https://directus.io${addTokenToURL('/assets/test.jpg?download=')}`);
+});
+
+test('Subdirectory Install: Get asset url', () => {
+	global.window.location.href = 'https://directus.io/subdirectory/admin/test/';
+	const output = getAssetUrl('test.jpg');
+	expect(output).toBe(`https://directus.io/subdirectory${addTokenToURL('/assets/test.jpg')}`);
+});
+
+test('Subdirectory Install: Get asset url for download', () => {
+	global.window.location.href = 'https://directus.io/subdirectory/admin/test/';
+	const output = getAssetUrl('test.jpg', true);
+	expect(output).toBe(`https://directus.io/subdirectory${addTokenToURL('/assets/test.jpg?download=')}`);
+});
diff --git a/app/src/utils/get-asset-url.ts b/app/src/utils/get-asset-url.ts
new file mode 100644
index 0000000000..1df1a4a156
--- /dev/null
+++ b/app/src/utils/get-asset-url.ts
@@ -0,0 +1,12 @@
+import { addTokenToURL } from '@/api';
+import { getPublicURL } from '@/utils/get-root-path';
+
+export function getAssetUrl(filename: string, isDownload?: boolean): string {
+	const assetUrl = new URL(`assets/${filename}`, getPublicURL());
+
+	if (isDownload) {
+		assetUrl.searchParams.set('download', '');
+	}
+
+	return addTokenToURL(assetUrl.href);
+}