fix filter by folder for file and files interface (#15073)

app/src/components/v-upload.vue

@@ -96,6 +96,7 @@ import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import api from '@/api';
 import emitter, { Events } from '@/events';
 import { unexpectedError } from '@/utils/unexpected-error';
+import { Filter } from '@directus/shared/types';
 
 export default defineComponent({
 	components: { DrawerCollection },
@@ -136,8 +137,8 @@ export default defineComponent({
 		const activeDialog = ref<'choose' | 'url' | null>(null);
 
 		const filterByFolder = computed(() => {
-			if (!props.folder) return null;
-			return { folder: { id: { _eq: props.folder } } };
+			if (!props.folder) return undefined;
+			return { folder: { id: { _eq: props.folder } } } as Filter;
 		});
 
 		return {

app/src/interfaces/file/file.vue

@@ -108,6 +108,7 @@
 			v-if="activeDialog === 'choose'"
 			collection="directus_files"
 			:active="activeDialog === 'choose'"
+			:filter="filterByFolder"
 			@update:active="activeDialog = null"
 			@input="setSelection"
 		/>
@@ -147,6 +148,7 @@ import DrawerItem from '@/views/private/components/drawer-item.vue';
 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';
 
 type FileInfo = {
 	id: string;
@@ -190,6 +192,11 @@ const { t } = useI18n();
 
 const activeDialog = ref<'upload' | 'choose' | 'url' | null>(null);
 
+const filterByFolder = computed(() => {
+	if (!props.folder) return undefined;
+	return { folder: { id: { _eq: props.folder } } } as Filter;
+});
+
 const fileExtension = computed(() => {
 	if (file.value === null) return null;
 	return readableMimeType(file.value.type, true);

app/src/interfaces/files/files.vue

@@ -336,6 +336,14 @@ const customFilter = computed(() => {
 		_and: [],
 	};
 
+	if (props.folder) {
+		filter._and.push({
+			folder: {
+				id: { _eq: props.folder },
+			},
+		});
+	}
+
 	if (!relationInfo.value) return filter;
 
 	const reverseRelation = `$FOLLOW(${relationInfo.value.junctionCollection.collection},${relationInfo.value.junctionField.field})`;