feat: join field on upload fields (#8379)

This PR makes it possible to use the new `join` field in connection with
an `upload` field. Previously `join` was reserved only for
relationships.

packages/payload/src/fields/config/sanitizeJoinField.ts

@@ -1,6 +1,6 @@
 import type { SanitizedJoins } from '../../collections/config/types.js'
 import type { Config } from '../../config/types.js'
-import type { JoinField, RelationshipField } from './types.js'
+import type { JoinField, RelationshipField, UploadField } from './types.js'
 
 import { APIError } from '../../errors/index.js'
 import { InvalidFieldJoin } from '../../errors/InvalidFieldJoin.js'
@@ -33,7 +33,7 @@ export const sanitizeJoinField = ({
   if (!joinCollection) {
     throw new InvalidFieldJoin(field)
   }
-  let joinRelationship: RelationshipField | undefined
+  let joinRelationship: RelationshipField | UploadField
 
   const pathSegments = field.on.split('.') // Split the schema path into segments
   let currentSegmentIndex = 0
@@ -49,9 +49,10 @@ export const sanitizeJoinField = ({
       if ('name' in field && field.name === currentSegment) {
         // Check if this is the last segment in the path
         if (
-          currentSegmentIndex === pathSegments.length - 1 &&
-          'type' in field &&
-          field.type === 'relationship'
+          (currentSegmentIndex === pathSegments.length - 1 &&
+            'type' in field &&
+            field.type === 'relationship') ||
+          field.type === 'upload'
         ) {
           joinRelationship = field // Return the matched field
           next()

packages/ui/src/elements/Table/TableCellProvider/index.tsx

@@ -28,12 +28,12 @@ export const TableCellProvider: React.FC<{
   return (
     <TableCellContext.Provider
       value={{
+        ...contextToInherit,
         cellData,
         cellProps,
         columnIndex,
         customCellContext,
         rowData,
-        ...contextToInherit,
       }}
     >
       {children}

packages/ui/src/fields/Upload/Input.tsx

@@ -153,6 +153,9 @@ export function UploadInput(props: UploadInputProps) {
     collectionSlug: activeRelationTo,
   })
 
+  /**
+   * Prevent initial retrieval of documents from running more than once
+   */
   const loadedValueDocsRef = React.useRef<boolean>(false)
 
   const canCreate = useMemo(() => {
@@ -388,6 +391,7 @@ export function UploadInput(props: UploadInputProps) {
   useEffect(() => {
     async function loadInitialDocs() {
       if (value) {
+        loadedValueDocsRef.current = true
         const loadedDocs = await populateDocs(
           Array.isArray(value) ? value : [value],
           activeRelationTo,
@@ -398,8 +402,6 @@ export function UploadInput(props: UploadInputProps) {
           )
         }
       }
-
-      loadedValueDocsRef.current = true
     }
 
     if (!loadedValueDocsRef.current) {