fix(next): admin panel UI not rendering custom upload components (#9925)

### What?

Currently it is not possible to override the upload component.

### Why?

The ability to override the upload component is missing from
`renderDocumentSlots`.

### How?

Adding a check to include the custom upload component if it is
available.

This issue is holding me back from releasing a payload plugin.

Fixes #9591

Author: rilrom

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).                                                              |
 
 <Banner type="success">

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
 }
 

test/uploads/collections/CustomUploadField/components/CustomUpload/index.client.tsx

@@ -9,7 +9,13 @@ const CustomDrawer = () => {
   return (
     <Drawer slug={customDrawerSlug}>
       <h1>Custom Drawer</h1>
-      <TextField name="alt" path="alt" />
+      <TextField
+        field={{
+          name: 'alt',
+          label: 'Alt',
+        }}
+        path="alt"
+      />
     </Drawer>
   )
 }

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