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

@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Fixed an issue where importing an image via URL wouldn't place it in the current folder

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);

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>