CustomUpload component not used

[tylkomat]

Describe the Bug

A custom Upload component configured in an upload activated collection via admin.components.edit.Upload is not used. Only the default Upload component is used.

The Problem lies here: https://github.com/payloadcms/payload/blob/main/packages/ui/src/elements/BulkUpload/EditForm/index.tsx#L160
The || syntax is not valid for react components, it should be ?:.

Link to the code that reproduces this issue

https://github.com/tylkomat/payload/tree/bug-custom-upload

Reproduction Steps

1. run `pnpm dev:generate-importmap _community
2. run pnpm dev _community
3. visit the Media collection and upload an image to see the Upload component in the edit form

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Payload: 3.12.0
NextJS: 15.1.3
Nodejs: 20.12.2

[akhrarovsaid]

Hey @tylkomat,

So this may be related to/possible duplicate of #9591. The root of the issue is that the map of components to override with, currently, does not check for or add a custom upload component. You can add one in config, have the importMap pick it up, but it will not be rendered as it's simply not included in the rendering of fields. There's a PR attached to the aforementioned issue that should do exactly that.

All the || does in the context of rendering React components is check if the first provided value is falsey, and if so, proceed with the second. As custom upload components are not included as of right now, that check will always default to the fallback of the standard Upload element.

Hopefully that PR gets looked at soon though!

[tylkomat]

Yes, it is a duplicate. Sorry, didn't see the other issue.

[rilrom]

In the interim I have been using the below @payloadcms/next@^3.12.0 patch to allow the use of a CustomUpload component until the PR is merged in.

diff --git a/dist/views/Document/renderDocumentSlots.js b/dist/views/Document/renderDocumentSlots.js
index a251f39546dcfb9fc566c3d7b948bc80c66a8e00..9d2ba95113ce2579ce998954f92524355e483c8c 100644
--- a/dist/views/Document/renderDocumentSlots.js
+++ b/dist/views/Document/renderDocumentSlots.js
@@ -71,6 +71,13 @@ 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;
 };
 export const renderDocumentSlotsHandler = async args => {