fix: upload drawer not loading data for uploads without files (#15150)

### What?
Fixes an issue where clicking the `edit` button on an upload
relationship field opens an empty drawer **if the related document has
no file attached** (`filesRequiredOnCreate: false`). Documents with a
file open correctly with all data.

### Why?
The drawer ID was only getting set when a file URL existed (`src ? id :
undefined`), so documents without files didn’t pass their ID to the
drawer. The drawer needs the document ID to display document data.

### How?
Updated the drawer ID logic in `fields > Upload > RelationshipContent`
from `src ? id : undefined` to `id ?? undefined`.

#### Testing
Test added to the `upload` suite.

**Reported by client.**

Author: JessRynkar

packages/ui/src/fields/Upload/RelationshipContent/index.tsx

@@ -68,7 +68,7 @@ export function RelationshipContent(props: Props) {
       : undefined
 
   const [DocumentDrawer, _, { openDrawer }] = useDocumentDrawer({
-    id: src ? id : undefined,
+    id: id ?? undefined,
     collectionSlug,
   })
 

test/uploads/collections/NoFilesRequired/index.ts

@@ -0,0 +1,23 @@
+import type { CollectionConfig } from 'payload'
+
+import { fileURLToPath } from 'node:url'
+import path from 'path'
+
+import { noFilesRequiredSlug } from '../../shared.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export const NoFilesRequired: CollectionConfig = {
+  slug: noFilesRequiredSlug,
+  upload: {
+    staticDir: path.resolve(dirname, 'uploads'),
+    filesRequiredOnCreate: false,
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
+  ],
+}

test/uploads/collections/RelationToNoFilesRequired/index.ts

@@ -0,0 +1,18 @@
+import type { CollectionConfig } from 'payload'
+
+import { noFilesRequiredSlug, relationToNoFilesRequiredSlug } from '../../shared.js'
+
+export const RelationToNoFilesRequired: CollectionConfig = {
+  slug: relationToNoFilesRequiredSlug,
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
+    {
+      name: 'uploadField',
+      type: 'upload',
+      relationTo: noFilesRequiredSlug,
+    },
+  ],
+}

test/uploads/config.ts

@@ -15,6 +15,8 @@ import { AnyImageTypeCollection } from './collections/AnyImageType/index.js'
 import { BulkUploadsCollection } from './collections/BulkUploads/index.js'
 import { CustomUploadFieldCollection } from './collections/CustomUploadField/index.js'
 import { FileMimeType } from './collections/FileMimeType/index.js'
+import { NoFilesRequired } from './collections/NoFilesRequired/index.js'
+import { RelationToNoFilesRequired } from './collections/RelationToNoFilesRequired/index.js'
 import { SimpleRelationshipCollection } from './collections/SimpleRelationship/index.js'
 import { Uploads1 } from './collections/Upload1/index.js'
 import { Uploads2 } from './collections/Upload2/index.js'
@@ -791,6 +793,8 @@ export default buildConfigWithDefaults({
     AdminThumbnailWithSearchQueries,
     AdminThumbnailSize,
     AdminUploadControl,
+    NoFilesRequired,
+    RelationToNoFilesRequired,
     {
       slug: 'optional-file',
       fields: [],

test/uploads/e2e.spec.ts

@@ -44,8 +44,10 @@ import {
   mediaWithImageSizeAdminPropsSlug,
   mediaWithoutCacheTagsSlug,
   mediaWithoutDeleteAccessSlug,
+  noFilesRequiredSlug,
   relationPreviewSlug,
   relationSlug,
+  relationToNoFilesRequiredSlug,
   svgOnlySlug,
   threeDimensionalSlug,
   withMetadataSlug,
@@ -95,6 +97,8 @@ let fileMimeTypeURL: AdminUrlUtil
 let svgOnlyURL: AdminUrlUtil
 let mediaWithoutDeleteAccessURL: AdminUrlUtil
 let mediaWithImageSizeAdminPropsURL: AdminUrlUtil
+let noFilesRequiredURL: AdminUrlUtil
+let relationToNoFilesRequiredURL: AdminUrlUtil
 
 describe('Uploads', () => {
   let page: Page
@@ -137,6 +141,8 @@ describe('Uploads', () => {
     svgOnlyURL = new AdminUrlUtil(serverURL, svgOnlySlug)
     mediaWithoutDeleteAccessURL = new AdminUrlUtil(serverURL, mediaWithoutDeleteAccessSlug)
     mediaWithImageSizeAdminPropsURL = new AdminUrlUtil(serverURL, mediaWithImageSizeAdminPropsSlug)
+    noFilesRequiredURL = new AdminUrlUtil(serverURL, noFilesRequiredSlug)
+    relationToNoFilesRequiredURL = new AdminUrlUtil(serverURL, relationToNoFilesRequiredSlug)
 
     const context = await browser.newContext()
     await context.grantPermissions(['clipboard-read', 'clipboard-write'])
@@ -1895,4 +1901,34 @@ describe('Uploads', () => {
     const titleField = page.locator('#field-title')
     await expect(titleField).toHaveValue('updated title')
   })
+
+  test('should show data in drawer when editing relationship to upload collection with filesRequiredOnCreate: false', async () => {
+    const uploadDoc = await payload.create({
+      collection: noFilesRequiredSlug,
+      data: {
+        title: 'Upload without file',
+      },
+    })
+
+    const relationDoc = await payload.create({
+      collection: relationToNoFilesRequiredSlug,
+      data: {
+        title: 'Relation document',
+        uploadField: uploadDoc.id,
+      },
+    })
+
+    await page.goto(relationToNoFilesRequiredURL.edit(relationDoc.id))
+
+    await expect(page.locator('#field-uploadField')).toBeVisible()
+
+    await page.locator('#field-uploadField .upload-relationship-details__edit').click()
+
+    const drawer = page.locator('[id^=doc-drawer_no-files-required_]')
+    await expect(drawer).toBeVisible()
+
+    const titleField = drawer.locator('#field-title')
+
+    await expect(titleField).toHaveValue('Upload without file')
+  })
 })

test/uploads/payload-types.ts

@@ -105,6 +105,8 @@ export interface Config {
     'admin-thumbnail-with-search-queries': AdminThumbnailWithSearchQuery;
     'admin-thumbnail-size': AdminThumbnailSize;
     'admin-upload-control': AdminUploadControl;
+    'no-files-required': NoFilesRequired;
+    'relation-to-no-files-required': RelationToNoFilesRequired;
     'optional-file': OptionalFile;
     'required-file': RequiredFile;
     versions: Version;
@@ -170,6 +172,8 @@ export interface Config {
     'admin-thumbnail-with-search-queries': AdminThumbnailWithSearchQueriesSelect<false> | AdminThumbnailWithSearchQueriesSelect<true>;
     'admin-thumbnail-size': AdminThumbnailSizeSelect<false> | AdminThumbnailSizeSelect<true>;
     'admin-upload-control': AdminUploadControlSelect<false> | AdminUploadControlSelect<true>;
+    'no-files-required': NoFilesRequiredSelect<false> | NoFilesRequiredSelect<true>;
+    'relation-to-no-files-required': RelationToNoFilesRequiredSelect<false> | RelationToNoFilesRequiredSelect<true>;
     'optional-file': OptionalFileSelect<false> | OptionalFileSelect<true>;
     'required-file': RequiredFileSelect<false> | RequiredFileSelect<true>;
     versions: VersionsSelect<false> | VersionsSelect<true>;
@@ -1446,6 +1450,36 @@ export interface AdminUploadControl {
   focalX?: number | null;
   focalY?: number | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "no-files-required".
+ */
+export interface NoFilesRequired {
+  id: string;
+  title?: string | null;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "relation-to-no-files-required".
+ */
+export interface RelationToNoFilesRequired {
+  id: string;
+  title?: string | null;
+  uploadField?: (string | null) | NoFilesRequired;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "optional-file".
@@ -1972,6 +2006,14 @@ export interface PayloadLockedDocument {
         relationTo: 'admin-upload-control';
         value: string | AdminUploadControl;
       } | null)
+    | ({
+        relationTo: 'no-files-required';
+        value: string | NoFilesRequired;
+      } | null)
+    | ({
+        relationTo: 'relation-to-no-files-required';
+        value: string | RelationToNoFilesRequired;
+      } | null)
     | ({
         relationTo: 'optional-file';
         value: string | OptionalFile;
@@ -3363,6 +3405,34 @@ export interface AdminUploadControlSelect<T extends boolean = true> {
   focalX?: T;
   focalY?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "no-files-required_select".
+ */
+export interface NoFilesRequiredSelect<T extends boolean = true> {
+  title?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "relation-to-no-files-required_select".
+ */
+export interface RelationToNoFilesRequiredSelect<T extends boolean = true> {
+  title?: T;
+  uploadField?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "optional-file_select".

test/uploads/shared.ts

@@ -45,3 +45,5 @@ export const anyImagesSlug = 'any-images'
 export const mediaWithoutDeleteAccessSlug = 'media-without-delete-access'
 export const mediaWithImageSizeAdminPropsSlug = 'media-with-image-size-admin-props'
 export const uploads2Slug = 'uploads-2'
+export const noFilesRequiredSlug = 'no-files-required'
+export const relationToNoFilesRequiredSlug = 'relation-to-no-files-required'