Fix URL for subfolder assets (#15126)

* Prevent duplicate rootPath for image in file-preview

* Add rootPath to file and file-image for downloading

* Revert change to v-image

* Patch rootPaths accordingly

* Fix missing file name on download

app/src/interfaces/file-image/file-image.vue

@@ -76,6 +76,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 { readableMimeType } from '@/utils/readable-mime-type';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
 import FileLightbox from '@/views/private/components/file-lightbox.vue';
@@ -143,7 +144,7 @@ const ext = computed(() => (image.value ? readableMimeType(image.value.type, tru
 
 const downloadSrc = computed(() => {
 	if (!image.value) return null;
-	return addTokenToURL('/assets/' + image.value.id);
+	return addTokenToURL(getRootPath() + 'assets/' + image.value.id);
 });
 
 const meta = computed(() => {

app/src/interfaces/file/file.vue

@@ -46,7 +46,7 @@
 
 			<v-list>
 				<template v-if="file">
-					<v-list-item :download="file.filename_download" :href="assetURL">
+					<v-list-item :download="file.filename_download" :href="downloadURL">
 						<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>
@@ -141,7 +141,7 @@
 import { useI18n } from 'vue-i18n';
 import { ref, computed, toRefs } from 'vue';
 import DrawerCollection from '@/views/private/components/drawer-collection.vue';
-import api from '@/api';
+import api, { addTokenToURL } from '@/api';
 import { readableMimeType } from '@/utils/readable-mime-type';
 import { unexpectedError } from '@/utils/unexpected-error';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
@@ -149,6 +149,7 @@ 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;
@@ -207,6 +208,10 @@ 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;

app/src/interfaces/files/files.vue

@@ -314,7 +314,7 @@ function onUpload(files: Record<string, any>[]) {
 
 const downloadUrl = computed(() => {
 	if (relatedPrimaryKey.value === null || relationInfo.value?.relatedCollection.collection !== 'directus_files') return;
-	return addTokenToURL(getRootPath() + `assets/${relatedPrimaryKey.value}`);
+	return addTokenToURL(getRootPath() + `assets/${relatedPrimaryKey.value}?download`);
 });
 
 function getUrl(junctionRow: Record<string, any>, addDownload?: boolean) {

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

@@ -240,10 +240,10 @@ const confirmDelete = ref(false);
 const editActive = ref(false);
 const fileSrc = computed(() => {
 	if (item.value && item.value.modified_on) {
-		return getRootPath() + `assets/${props.primaryKey}?cache-buster=${item.value.modified_on}&key=system-large-contain`;
+		return `assets/${props.primaryKey}?cache-buster=${item.value.modified_on}&key=system-large-contain`;
 	}
 
-	return getRootPath() + `assets/${props.primaryKey}?key=system-large-contain`;
+	return `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

app/src/views/private/components/drawer-item.vue

@@ -61,7 +61,6 @@
 
 <script lang="ts">
 import api from '@/api';
-import { getRootPath } from '@/utils/get-root-path';
 import FilePreview from '@/views/private/components/file-preview.vue';
 import { set } from 'lodash';
 import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';
@@ -251,7 +250,7 @@ export default defineComponent({
 				const fileData = item.value?.[props.junctionField];
 				if (!fileData) return null;
 
-				const src = getRootPath() + `assets/${fileData.id}?key=system-large-contain`;
+				const src = `assets/${fileData.id}?key=system-large-contain`;
 				return { ...fileData, src };
 			});
 

app/src/views/private/components/file-preview.vue

@@ -20,6 +20,7 @@
 import { ref, computed } from 'vue';
 import { readableMimeType } from '@/utils/readable-mime-type';
 import { addTokenToURL } from '@/api';
+import { getRootPath } from '@/utils/get-root-path';
 
 interface Props {
 	mime: string;
@@ -59,7 +60,7 @@ const isSVG = computed(() => props.mime.includes('svg'));
 const maxHeight = computed(() => Math.min(props.height ?? 528, 528) + 'px');
 const isSmall = computed(() => props.height < 528);
 
-const authenticatedSrc = computed(() => addTokenToURL(props.src));
+const authenticatedSrc = computed(() => addTokenToURL(getRootPath() + props.src));
 </script>
 
 <style lang="scss" scoped>