Merge pull request #1835 from payloadcms/fix/1801

fix: upload field 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/config.ts

@@ -89,10 +89,20 @@ export default buildConfig({
 
     if (fs.existsSync(uploadsDir)) fs.readdirSync(uploadsDir).forEach((f) => fs.rmSync(`${uploadsDir}/${f}`));
 
-    const filePath = path.resolve(__dirname, './collections/Upload/payload.jpg');
-    const file = await getFileByPath(filePath);
+    const pngPath = path.resolve(__dirname, './uploads/payload.png');
+    const pngFile = await getFileByPath(pngPath);
+    const createdPNGDoc = await payload.create({ collection: 'uploads', data: {}, file: pngFile });
 
-    const createdUploadDoc = await payload.create({ collection: 'uploads', data: uploadsDoc, file });
+    const jpgPath = path.resolve(__dirname, './collections/Upload/payload.jpg');
+    const jpgFile = await getFileByPath(jpgPath);
+    const createdJPGDoc = await payload.create({
+      collection: 'uploads',
+      data: {
+        ...uploadsDoc,
+        media: createdPNGDoc.id,
+      },
+      file: jpgFile
+     });
 
     const richTextDocWithRelId = JSON.parse(JSON.stringify(richTextDoc).replace('{{ARRAY_DOC_ID}}', createdArrayDoc.id));
     const richTextDocWithRelationship = { ...richTextDocWithRelId };
@@ -101,8 +111,8 @@ export default buildConfig({
     richTextDocWithRelationship.richText[richTextRelationshipIndex].value = { id: createdTextDoc.id };
 
     const richTextUploadIndex = richTextDocWithRelationship.richText.findIndex(({ type }) => type === 'upload');
-    richTextDocWithRelationship.richText[richTextUploadIndex].value = { id: createdUploadDoc.id };
-    richTextDocWithRelationship.richTextReadOnly[richTextUploadIndex].value = { id: createdUploadDoc.id };
+    richTextDocWithRelationship.richText[richTextUploadIndex].value = { id: createdJPGDoc.id };
+    richTextDocWithRelationship.richTextReadOnly[richTextUploadIndex].value = { id: createdJPGDoc.id };
 
     await payload.create({ collection: 'rich-text-fields', data: richTextBulletsDoc });
     await payload.create({ collection: 'rich-text-fields', data: richTextDocWithRelationship });

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';
@@ -500,4 +501,55 @@ describe('fields', () => {
       await expect(page.locator('.Toastify')).toContainText('successfully');
     });
   });
+
+  describe('upload', () => {
+    let url: AdminUrlUtil;
+    beforeAll(() => {
+      url = new AdminUrlUtil(serverURL, 'uploads');
+    });
+
+    test('should upload files', async () => {
+      await page.goto(url.create);
+
+      // create a jpg upload
+      await page.locator('.file-field__upload input[type="file"]').setInputFiles(path.resolve(__dirname, './collections/Upload/payload.jpg'));
+      await expect(page.locator('.file-field .file-field__filename')).toContainText('payload.jpg');
+      await page.locator('#action-save').click();
+      await wait(200);
+      await expect(page.locator('.Toastify')).toContainText('successfully');
+    });
+
+    // 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');
+    });
+
+    test('should upload using the document drawer', async () => {
+      // Open the media drawer and create a png upload
+      await page.locator('.field-type.upload .upload__toggler.doc-drawer__toggler').click();
+      await page.locator('[id^=doc-drawer_uploads_1_] .file-field__upload input[type="file"]').setInputFiles(path.resolve(__dirname, './uploads/payload.png'));
+      await page.locator('[id^=doc-drawer_uploads_1_] #action-save').click();
+      await wait(200);
+      await expect(page.locator('.Toastify')).toContainText('successfully');
+
+      // Assert that the media field has the png upload
+      await expect(page.locator('.field-type.upload .file-details .file-meta__url a')).toHaveAttribute('href', '/uploads/payload-1.png');
+      await expect(page.locator('.field-type.upload .file-details .file-meta__url a')).toContainText('payload-1.png');
+      await expect(page.locator('.field-type.upload .file-details img')).toHaveAttribute('src', '/uploads/payload-1.png');
+      await page.locator('#action-save').click();
+      await wait(200);
+      await expect(page.locator('.Toastify')).toContainText('successfully');
+    });
+
+    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();
+      await wait(200);
+      const jpgImages = await page.locator('[id^=list-drawer_1_] .upload-gallery img[src$=".jpg"]');
+      expect(await jpgImages.count()).toEqual(0);
+    });
+  });
 });