diff --git a/docs/admin/collections.mdx b/docs/admin/collections.mdx index 6fa5fb9db3..88a394c09c 100644 --- a/docs/admin/collections.mdx +++ b/docs/admin/collections.mdx @@ -76,6 +76,7 @@ The following options are available: | **`edit.SaveDraftButton`** | Replace the default Save Draft Button with a Custom Component. [Drafts](../versions/drafts) must be enabled and autosave must be disabled. | | **`edit.PublishButton`** | Replace the default Publish Button with a Custom Component. [Drafts](../versions/drafts) must be enabled. | | **`edit.PreviewButton`** | Replace the default Preview Button with a Custom Component. [Preview](#preview) must be enabled. | +| **`edit.Upload`** | Replace the default Upload component with a Custom Component. [Upload](../upload/overview) must be enabled. | | **`views`** | Override or create new views within the Admin Panel. [More details](./views). | diff --git a/packages/next/src/views/Document/renderDocumentSlots.tsx b/packages/next/src/views/Document/renderDocumentSlots.tsx index e86cd13458..b74eb50bce 100644 --- a/packages/next/src/views/Document/renderDocumentSlots.tsx +++ b/packages/next/src/views/Document/renderDocumentSlots.tsx @@ -115,6 +115,14 @@ export const renderDocumentSlots: (args: { } } + if (collectionConfig?.upload && collectionConfig?.admin?.components?.edit?.Upload) { + components.Upload = RenderServerComponent({ + Component: collectionConfig.admin.components.edit.Upload, + importMap: req.payload.importMap, + serverProps, + }) + } + return components } diff --git a/test/uploads/collections/CustomUploadField/components/CustomUpload/index.client.tsx b/test/uploads/collections/CustomUploadField/components/CustomUpload/index.client.tsx index a389533d30..9dd75697b5 100644 --- a/test/uploads/collections/CustomUploadField/components/CustomUpload/index.client.tsx +++ b/test/uploads/collections/CustomUploadField/components/CustomUpload/index.client.tsx @@ -9,7 +9,13 @@ const CustomDrawer = () => { return (

Custom Drawer

- +
) } diff --git a/test/uploads/e2e.spec.ts b/test/uploads/e2e.spec.ts index d2ef3a4841..37b47d623b 100644 --- a/test/uploads/e2e.spec.ts +++ b/test/uploads/e2e.spec.ts @@ -35,6 +35,7 @@ import { withMetadataSlug, withOnlyJPEGMetadataSlug, withoutMetadataSlug, + customUploadFieldSlug, } from './shared.js' import { startMockCorsServer } from './startMockCorsServer.js' const filename = fileURLToPath(import.meta.url) @@ -61,6 +62,7 @@ let relationPreviewURL: AdminUrlUtil let customFileNameURL: AdminUrlUtil let uploadsOne: AdminUrlUtil let uploadsTwo: AdminUrlUtil +let customUploadFieldURL: AdminUrlUtil describe('Uploads', () => { let page: Page @@ -89,6 +91,7 @@ describe('Uploads', () => { customFileNameURL = new AdminUrlUtil(serverURL, customFileNameMediaSlug) uploadsOne = new AdminUrlUtil(serverURL, 'uploads-1') uploadsTwo = new AdminUrlUtil(serverURL, 'uploads-2') + customUploadFieldURL = new AdminUrlUtil(serverURL, customUploadFieldSlug) const context = await browser.newContext() page = await context.newPage() @@ -672,6 +675,20 @@ describe('Uploads', () => { expect(webpMediaDoc.sizes.sizeThree.filesize).toEqual(211638) }) + test('should show custom upload component', async () => { + await page.goto(customUploadFieldURL.create) + + const serverText = page.locator( + '.collection-edit--custom-upload-field .document-fields__edit h2', + ) + await expect(serverText).toHaveText('This text was rendered on the server') + + const clientText = page.locator( + '.collection-edit--custom-upload-field .document-fields__edit h3', + ) + await expect(clientText).toHaveText('This text was rendered on the client') + }) + describe('remote url fetching', () => { beforeAll(async () => { mockCorsServer = startMockCorsServer()