feat: adds upload's relationship thumbnail (#5015)

## Description

I've made an implementation of the feature requested here:
https://github.com/payloadcms/payload/discussions/3407

Before:
![CleanShot 2024-02-07 at 00 39
47](https://github.com/payloadcms/payload/assets/34719093/4b182118-41bd-47f7-af03-a0b739f7e407)

After:
![CleanShot 2024-02-07 at 00 40
17](https://github.com/payloadcms/payload/assets/34719093/d813de81-bab5-40b2-b31c-5a7ee107dabd)


- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

<!-- Please delete options that are not relevant. -->

- [x] New feature (non-breaking change which adds functionality)

## Checklist:

- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] Existing test suite passes locally with my changes

packages/payload/src/admin/components/views/collections/List/Cell/field-types/Relationship/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import type { RelationshipField } from '../../../../../../../../exports/types'
+import type { RelationshipField, UploadField } from '../../../../../../../../exports/types'
 import type { CellComponentProps } from '../../types'
 
 import { getTranslation } from '../../../../../../../../utilities/getTranslation'
@@ -9,13 +9,14 @@ import useIntersect from '../../../../../../../hooks/useIntersect'
 import { formatUseAsTitle } from '../../../../../../../hooks/useTitle'
 import { useConfig } from '../../../../../../utilities/Config'
 import { useListRelationships } from '../../../RelationshipProvider'
+import File from '../File'
 import './index.scss'
 
 type Value = { relationTo: string; value: number | string }
 const baseClass = 'relationship-cell'
 const totalToShow = 3
 
-const RelationshipCell: React.FC<CellComponentProps<RelationshipField>> = (props) => {
+const RelationshipCell: React.FC<CellComponentProps<RelationshipField | UploadField>> = (props) => {
   const { data: cellData, field } = props
   const config = useConfig()
   const { collections, routes } = config
@@ -68,11 +69,24 @@ const RelationshipCell: React.FC<CellComponentProps<RelationshipField>> = (props
           i18n,
         })
 
+        let fileField = null
+        if (field.type === 'upload') {
+          const relatedCollectionPreview = !!relatedCollection.upload.displayPreview
+          const fieldPreview = field.displayPreview
+          const previewAllowed =
+            fieldPreview || (relatedCollectionPreview && fieldPreview !== false)
+          if (previewAllowed && document) {
+            fileField = (
+              <File collection={relatedCollection} data={label} field={field} rowData={document} />
+            )
+          }
+        }
+
         return (
           <React.Fragment key={i}>
             {document === false && `${t('untitled')} - ID: ${value}`}
             {document === null && `${t('loading')}...`}
-            {document && (label || `${t('untitled')} - ID: ${value}`)}
+            {document && (fileField || label || `${t('untitled')} - ID: ${value}`)}
             {values.length > i + 1 && ', '}
           </React.Fragment>
         )

packages/payload/src/collections/config/schema.ts

@@ -171,6 +171,7 @@ const collectionSchema = joi.object().keys({
       adminThumbnail: joi.alternatives().try(joi.string(), joi.func()),
       crop: joi.bool(),
       disableLocalStorage: joi.bool(),
+      displayPreview: joi.bool().default(false),
       externalFileHeaderFilter: joi.func(),
       filesRequiredOnCreate: joi.bool(),
       focalPoint: joi.bool(),

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

@@ -342,6 +342,7 @@ export const upload = baseField.keys({
     }),
   }),
   defaultValue: joi.alternatives().try(joi.object(), joi.func()),
+  displayPreview: joi.boolean().default(false),
   filterOptions: joi.alternatives().try(joi.object(), joi.func()),
   maxDepth: joi.number(),
   relationTo: joi.string().required(),

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

@@ -408,6 +408,7 @@ export type UploadField = FieldBase & {
       Label?: React.ComponentType<LabelProps>
     }
   }
+  displayPreview?: boolean
   filterOptions?: FilterOptions
   maxDepth?: number
   relationTo: string

packages/payload/src/uploads/types.ts

@@ -77,6 +77,7 @@ export type IncomingUploadType = {
   adminThumbnail?: GetAdminThumbnail | string
   crop?: boolean
   disableLocalStorage?: boolean
+  displayPreview?: boolean
   /**
    * Accepts existing headers and can filter/modify them.
    *
@@ -102,6 +103,7 @@ export type Upload = {
   adminThumbnail?: GetAdminThumbnail | string
   crop?: boolean
   disableLocalStorage?: boolean
+  displayPreview?: boolean
   filesRequiredOnCreate?: boolean
   focalPoint?: boolean
   formatOptions?: ImageUploadFormatOptions