fix: upload field filterOptions

src/admin/components/elements/ListDrawer/DrawerContent.tsx

@@ -67,7 +67,8 @@ const DrawerContent: React.FC<ListDrawerProps & {
   collectionSlugs,
   uploads,
   selectedCollection,
-  enabledCollectionConfigs
+  enabledCollectionConfigs,
+  filterOptions,
 }) => {
   const { t, i18n } = useTranslation(['upload', 'general']);
   const { permissions } = useAuth();
@@ -165,13 +166,21 @@ const DrawerContent: React.FC<ListDrawerProps & {
     } = {};
 
     if (page) params.page = page;
-    if (where) params.where = where;
+
+    if (where) {
+      params.where = {
+        ...where || {},
+        ...filterOptions?.[selectedCollectionConfig.slug] ? {
+          ...filterOptions[selectedCollectionConfig.slug],
+        } : {},
+      };
+    }
     if (sort) params.sort = sort;
     if (limit) params.limit = limit;
     if (cacheBust) params.cacheBust = cacheBust;
 
     setParams(params);
-  }, [setParams, page, sort, where, limit, cacheBust]);
+  }, [setParams, page, sort, where, limit, cacheBust, filterOptions, selectedCollectionConfig]);
 
   useEffect(() => {
     const syncColumnsFromPrefs = async () => {
@@ -324,7 +333,7 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = (props) => {
 
   const [enabledCollectionConfigs] = useState(() => collections.filter((coll) => shouldIncludeCollection({ coll, uploads, collectionSlugs })));
 
-  if (enabledCollectionConfigs.length === 0){
+  if (enabledCollectionConfigs.length === 0) {
     return null;
   }
 
@@ -333,5 +342,5 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = (props) => {
       {...props}
       enabledCollectionConfigs={enabledCollectionConfigs}
     />
-  )
+  );
-}
+};

src/admin/components/elements/ListDrawer/index.tsx

@@ -54,7 +54,12 @@ export const ListDrawer: React.FC<ListDrawerProps> = (props) => {
   );
 };
 
-export const useListDrawer: UseListDrawer = ({ collectionSlugs, uploads, selectedCollection }) => {
+export const useListDrawer: UseListDrawer = ({
+  collectionSlugs,
+  uploads,
+  selectedCollection,
+  filterOptions,
+}) => {
   const drawerDepth = useEditDepth();
   const uuid = useId();
   const { modalState, toggleModal, closeModal, openModal } = useModal();
@@ -90,9 +95,10 @@ export const useListDrawer: UseListDrawer = ({ collectionSlugs, uploads, selecte
         closeDrawer={closeDrawer}
         key={drawerSlug}
         selectedCollection={selectedCollection}
+        filterOptions={filterOptions}
       />
     ));
-  }, [drawerSlug, collectionSlugs, uploads, closeDrawer, selectedCollection]);
+  }, [drawerSlug, collectionSlugs, uploads, closeDrawer, selectedCollection, filterOptions]);
 
   const MemoizedDrawerToggler = useMemo(() => {
     return ((props) => (

src/admin/components/elements/ListDrawer/types.ts

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { FilterOptionsResult } from '../../forms/field-types/Relationship/types';
 
 export type ListDrawerProps = {
   onSelect?: (args: {
@@ -11,6 +12,7 @@ export type ListDrawerProps = {
   collectionSlugs?: string[]
   uploads?: boolean
   selectedCollection?: string
+  filterOptions?: FilterOptionsResult
 }
 
 export type ListTogglerProps = HTMLAttributes<HTMLButtonElement> & {
@@ -24,6 +26,7 @@ export type UseListDrawer = (args: {
   collectionSlugs?: string[]
   selectedCollection?: string
   uploads?: boolean // finds all collections with upload: true
+  filterOptions?: FilterOptionsResult
 }) => [
   React.FC<Omit<ListDrawerProps, 'collectionSlug' | 'id'>>, // drawer
   React.FC<Omit<ListTogglerProps, 'collectionSlug' | 'id'>>, // toggler

src/admin/components/forms/field-types/Relationship/index.tsx

@@ -22,7 +22,7 @@ import { useDebouncedCallback } from '../../../../hooks/useDebouncedCallback';
 import wordBoundariesRegex from '../../../../../utilities/wordBoundariesRegex';
 import { AddNewRelation } from './AddNew';
 import { findOptionsByValue } from './findOptionsByValue';
-import { GetFilterOptions } from './GetFilterOptions';
+import { GetFilterOptions } from '../../../utilities/GetFilterOptions';
 import { SingleValue } from './select-components/SingleValue';
 import { MultiValueLabel } from './select-components/MultiValueLabel';
 import { DocumentDrawerProps } from '../../../elements/DocumentDrawer/types';

src/admin/components/forms/field-types/Upload/Input.tsx

@@ -16,6 +16,8 @@ import { DocumentDrawerProps } from '../../../elements/DocumentDrawer/types';
 import { ListDrawerProps } from '../../../elements/ListDrawer/types';
 
 import './index.scss';
+import { GetFilterOptions } from '../../../utilities/GetFilterOptions';
+import { FilterOptionsResult } from '../Relationship/types';
 
 const baseClass = 'upload';
 
@@ -57,6 +59,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
     api = '/api',
     collection,
     errorMessage,
+    filterOptions,
   } = props;
 
   const { t, i18n } = useTranslation('fields');
@@ -64,6 +67,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
   const [file, setFile] = useState(undefined);
   const [missingFile, setMissingFile] = useState(false);
   const [collectionSlugs] = useState([collection?.slug]);
+  const [filterOptionsResult, setFilterOptionsResult] = useState<FilterOptionsResult>();
 
   const [
     DocumentDrawer,
@@ -83,6 +87,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
     },
   ] = useListDrawer({
     collectionSlugs,
+    filterOptions: filterOptionsResult,
   });
 
   const classes = [
@@ -145,6 +150,15 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
         width,
       }}
     >
+      <GetFilterOptions
+        {...{
+          filterOptionsResult,
+          setFilterOptionsResult,
+          filterOptions,
+          path,
+          relationTo,
+        }}
+      />
       <Error
         showError={showError}
         message={errorMessage}

src/admin/components/utilities/GetFilterOptions/index.tsx

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import equal from 'deep-equal';
-import { FilterOptions } from '../../../../../../fields/config/types';
+import { FilterOptions } from '../../../../fields/config/types';
-import { useAuth } from '../../../../utilities/Auth';
+import { useAuth } from '../Auth';
-import { useDocumentInfo } from '../../../../utilities/DocumentInfo';
+import { useDocumentInfo } from '../DocumentInfo';
-import { useAllFormFields } from '../../../Form/context';
+import { useAllFormFields } from '../../forms/Form/context';
-import { getFilterOptionsQuery } from '../../getFilterOptionsQuery';
+import { getFilterOptionsQuery } from '../../forms/field-types/getFilterOptionsQuery';
-import { FilterOptionsResult } from '../types';
+import { FilterOptionsResult } from '../../forms/field-types/Relationship/types';
-import reduceFieldsToValues from '../../../Form/reduceFieldsToValues';
+import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues';
-import getSiblingData from '../../../Form/getSiblingData';
+import getSiblingData from '../../forms/Form/getSiblingData';
 
 type Args = {
   filterOptions: FilterOptions

test/fields/collections/Upload/index.ts

@@ -15,6 +15,11 @@ const Uploads: CollectionConfig = {
       type: 'upload',
       name: 'media',
       relationTo: 'uploads',
+      filterOptions: {
+        mimeType: {
+          equals: 'image/png',
+        },
+      },
     },
   ],
 };

test/fields/e2e.spec.ts

@@ -1,5 +1,6 @@
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
+import path from 'path';
 import { AdminUrlUtil } from '../helpers/adminUrlUtil';
 import { initPayloadE2E } from '../helpers/configHelpers';
 import { login, saveDocAndAssert } from '../helpers';
@@ -10,7 +11,6 @@ import { tabsSlug } from './collections/Tabs';
 import { collapsibleFieldsSlug } from './collections/Collapsible';
 import wait from '../../src/utilities/wait';
 import { jsonDoc } from './collections/JSON';
-import path from 'path';
 
 const { beforeAll, describe } = test;
 
@@ -513,7 +513,7 @@ describe('fields', () => {
       await expect(page.locator('.Toastify')).toContainText('successfully');
     });
 
-      // test that the image renders
+    // test that the image renders
     test('should render uploaded image', async () => {
       await expect(page.locator('.file-field .file-details img')).toHaveAttribute('src', '/uploads/payload-1.jpg');
     });
@@ -538,5 +538,12 @@ describe('fields', () => {
     test('should clear selected upload', async () => {
       await page.locator('.field-type.upload .file-details__remove').click();
     });
+
+    test('should select using the list drawer and restrict mimetype based on filterOptions', async () => {
+      await page.locator('.field-type.upload .upload__toggler.list-drawer__toggler').click();
+
+      const jpgImages = await page.locator('[id^=list-drawer_1_] .upload-gallery img[src$=".jpg"]');
+      expect(await jpgImages.count()).toEqual(0);
+    });
   });
 });