From 44a70dbabaa0a3f607aeffa4d75b239d2ec3cc8d Mon Sep 17 00:00:00 2001
From: Daniel Biegler <DanielBiegler@users.noreply.github.com>
Date: Wed, 4 Oct 2023 13:46:45 +0200
Subject: [PATCH] add folder prop to v-upload so that import can use it
 (#19897)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
---
 .changeset/clever-bobcats-collect.md     |  5 ++++
 app/src/components/v-upload.vue          | 30 ++++++++++--------------
 app/src/modules/files/routes/add-new.vue |  2 +-
 3 files changed, 19 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/clever-bobcats-collect.md

diff --git a/.changeset/clever-bobcats-collect.md b/.changeset/clever-bobcats-collect.md
new file mode 100644
index 0000000000..d6eecceae8
--- /dev/null
+++ b/.changeset/clever-bobcats-collect.md
@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Fixed an issue where importing an image via URL wouldn't place it in the current folder
diff --git a/app/src/components/v-upload.vue b/app/src/components/v-upload.vue
index a249350160..7510da65e5 100644
--- a/app/src/components/v-upload.vue
+++ b/app/src/components/v-upload.vue
@@ -57,11 +57,10 @@ function useUpload() {
 		uploading.value = true;
 		progress.value = 0;
 
-		const folderPreset: { folder?: string } = {};
-
-		if (props.folder) {
-			folderPreset.folder = props.folder;
-		}
+		const preset = {
+			...props.preset,
+			...(props.folder && { folder: props.folder }),
+		};
 
 		try {
 			if (!validFiles(files)) {
@@ -76,10 +75,7 @@ function useUpload() {
 						progress.value = Math.round(percentage.reduce((acc, cur) => (acc += cur)) / files.length);
 						done.value = percentage.filter((p) => p === 100).length;
 					},
-					preset: {
-						...props.preset,
-						...folderPreset,
-					},
+					preset,
 				});
 
 				uploadedFiles && emit('input', uploadedFiles);
@@ -90,10 +86,7 @@ function useUpload() {
 						done.value = percentage === 100 ? 1 : 0;
 					},
 					fileId: props.fileId,
-					preset: {
-						...props.preset,
-						...folderPreset,
-					},
+					preset,
 				});
 
 				uploadedFile && emit('input', uploadedFile);
@@ -200,13 +193,16 @@ function useURLImport() {
 	async function importFromURL() {
 		loading.value = true;
 
+		const data = {
+			...props.preset,
+			...(props.folder && { folder: props.folder }),
+			id: props.fileId,
+		};
+
 		try {
 			const response = await api.post(`/files/import`, {
 				url: url.value,
-				data: {
-					folder: props.folder,
-					id: props.fileId,
-				},
+				data,
 			});
 
 			emitter.emit(Events.upload);
diff --git a/app/src/modules/files/routes/add-new.vue b/app/src/modules/files/routes/add-new.vue
index 6220ad3881..75a8b63a29 100644
--- a/app/src/modules/files/routes/add-new.vue
+++ b/app/src/modules/files/routes/add-new.vue
@@ -23,7 +23,7 @@ function close() {
 		<v-card>
 			<v-card-title>{{ t('add_file') }}</v-card-title>
 			<v-card-text>
-				<v-upload :preset="props.folder ? { folder: props.folder } : undefined" multiple from-url @input="close" />
+				<v-upload :folder="props.folder" multiple from-url @input="close" />
 			</v-card-text>
 			<v-card-actions>
 				<v-button secondary @click="close">{{ t('done') }}</v-button>