fix(ui): upload.displayPreview should affect all previews in the admin panel (#11496)

### What?
We have the option to set `displayPreview: true || false` on upload
collections / upload fields - with the **field** option taking
precedence.

Currently, `displayPreview` is only affecting the list view for the
**_related_** collection.

i.e. if you go to a collection that has an upload field - the preview
will be hidden/shown correctly according to the `displayPreview` option.
<img width="620" alt="Screenshot 2025-03-03 at 12 38 18 PM"
src="https://github.com/user-attachments/assets/c11c2a84-0f64-4a08-940e-8c3f9096484b"
/>

However, when you go directly to the upload collection and look at the
list view - the preview is always shown, not affected by the
`displayPreview` option.
<img width="446" alt="Screenshot 2025-03-03 at 12 39 24 PM"
src="https://github.com/user-attachments/assets/f5e1267a-d98a-4c8c-8d54-93dea6cd2e31"
/>

Also, we have previews within the file field itself - also not being
affected by the `displayPreview` option.
<img width="528" alt="Screenshot 2025-03-03 at 12 40 06 PM"
src="https://github.com/user-attachments/assets/3dd04c9a-3d9f-4823-90f8-b538f3d420f9"
/>

All the upload related previews (excluding preview sizes and upload
editing options) should be affected by the `displayPreview` option.

### How?
Checks for `collection.displayPreview` and `field.displayPreview` in all
places where previews are displayed.

Closes #11404

Author: jessrynkar

packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx

@@ -38,17 +38,21 @@ export const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {
 
   const { filename, filesize, height, mimeType, thumbnailURL, url, width } = doc
 
+  const previewAllowed = uploadConfig.displayPreview ?? true
+
   return (
     <div className={baseClass}>
       <header>
-        <Thumbnail
-          // size="small"
-          className={`${baseClass}__thumbnail`}
-          doc={doc}
-          fileSrc={thumbnailURL || url}
-          imageCacheTag={imageCacheTag}
-          uploadConfig={uploadConfig}
-        />
+        {previewAllowed && (
+          <Thumbnail
+            // size="small"
+            className={`${baseClass}__thumbnail`}
+            doc={doc}
+            fileSrc={thumbnailURL || url}
+            imageCacheTag={imageCacheTag}
+            uploadConfig={uploadConfig}
+          />
+        )}
         <div className={`${baseClass}__main-detail`}>
           <FileMeta
             filename={filename as string}

packages/ui/src/elements/Table/DefaultCell/fields/File/index.tsx

@@ -21,22 +21,30 @@ export interface FileCellProps
 export const FileCell: React.FC<FileCellProps> = ({
   cellData: filename,
   collectionConfig,
+  field,
   rowData,
 }) => {
-  return (
-    <div className={baseClass}>
-      <Thumbnail
-        className={`${baseClass}__thumbnail`}
-        collectionSlug={collectionConfig?.slug}
-        doc={{
-          ...rowData,
-          filename,
-        }}
-        fileSrc={rowData?.thumbnailURL || rowData?.url}
-        size="small"
-        uploadConfig={collectionConfig?.upload}
-      />
-      <span className={`${baseClass}__filename`}>{String(filename)}</span>
-    </div>
-  )
+  const fieldPreviewAllowed = 'displayPreview' in field ? field.displayPreview : undefined
+  const previewAllowed = fieldPreviewAllowed ?? collectionConfig.upload?.displayPreview ?? true
+
+  if (previewAllowed) {
+    return (
+      <div className={baseClass}>
+        <Thumbnail
+          className={`${baseClass}__thumbnail`}
+          collectionSlug={collectionConfig?.slug}
+          doc={{
+            ...rowData,
+            filename,
+          }}
+          fileSrc={rowData?.thumbnailURL || rowData?.url}
+          size="small"
+          uploadConfig={collectionConfig?.upload}
+        />
+        <span className={`${baseClass}__filename`}>{String(filename)}</span>
+      </div>
+    )
+  } else {
+    return <>{String(filename)}</>
+  }
 }

packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx

@@ -110,9 +110,9 @@ export const RelationshipCell: React.FC<RelationshipCellProps> = ({
         let fileField = null
 
         if (field.type === 'upload') {
-          const relatedCollectionPreview = !!relatedCollection.upload.displayPreview
+          const fieldPreviewAllowed = 'displayPreview' in field ? field.displayPreview : undefined
           const previewAllowed =
-            field.displayPreview || (relatedCollectionPreview && field.displayPreview !== false)
+            fieldPreviewAllowed ?? relatedCollection.upload?.displayPreview ?? true
 
           if (previewAllowed && document) {
             fileField = (

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

@@ -17,6 +17,7 @@ import './index.scss'
 
 type Props = {
   readonly className?: string
+  readonly displayPreview?: boolean
   readonly fileDocs: {
     relationTo: string
     value: JsonObject
@@ -30,8 +31,17 @@ type Props = {
 }
 
 export function UploadComponentHasMany(props: Props) {
-  const { className, fileDocs, isSortable, onRemove, onReorder, readonly, reloadDoc, serverURL } =
-    props
+  const {
+    className,
+    displayPreview,
+    fileDocs,
+    isSortable,
+    onRemove,
+    onReorder,
+    readonly,
+    reloadDoc,
+    serverURL,
+  } = props
 
   const moveRow = React.useCallback(
     (moveFromIndex: number, moveToIndex: number) => {
@@ -120,6 +130,7 @@ export function UploadComponentHasMany(props: Props) {
                       alt={(value?.alt || value?.filename) as string}
                       byteSize={value.filesize as number}
                       collectionSlug={relationTo}
+                      displayPreview={displayPreview}
                       filename={value.filename as string}
                       id={id}
                       mimeType={value?.mimeType as string}

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

@@ -14,6 +14,7 @@ const baseClass = 'upload upload--has-one'
 
 type Props = {
   readonly className?: string
+  readonly displayPreview?: boolean
   readonly fileDoc: {
     relationTo: string
     value: JsonObject
@@ -25,7 +26,7 @@ type Props = {
 }
 
 export function UploadComponentHasOne(props: Props) {
-  const { className, fileDoc, onRemove, readonly, reloadDoc, serverURL } = props
+  const { className, displayPreview, fileDoc, onRemove, readonly, reloadDoc, serverURL } = props
   const { relationTo, value } = fileDoc
   const id = String(value?.id)
 
@@ -56,6 +57,7 @@ export function UploadComponentHasOne(props: Props) {
         alt={(value?.alt || value?.filename) as string}
         byteSize={value.filesize as number}
         collectionSlug={relationTo}
+        displayPreview={displayPreview}
         filename={value.filename as string}
         id={id}
         mimeType={value?.mimeType as string}

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

@@ -55,6 +55,7 @@ export type UploadInputProps = {
   readonly customUploadActions?: React.ReactNode[]
   readonly Description?: React.ReactNode
   readonly description?: StaticDescription
+  readonly displayPreview?: boolean
   readonly Error?: React.ReactNode
   readonly filterOptions?: FilterOptionsResult
   readonly hasMany?: boolean
@@ -85,6 +86,7 @@ export function UploadInput(props: UploadInputProps) {
     className,
     Description,
     description,
+    displayPreview,
     Error,
     filterOptions: filterOptionsFromProps,
     hasMany,
@@ -495,6 +497,7 @@ export function UploadInput(props: UploadInputProps) {
           <>
             {populatedDocs && populatedDocs?.length > 0 ? (
               <UploadComponentHasMany
+                displayPreview={displayPreview}
                 fileDocs={populatedDocs}
                 isSortable={isSortable && !readOnly}
                 onRemove={onRemove}
@@ -516,6 +519,7 @@ export function UploadInput(props: UploadInputProps) {
           <>
             {populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? (
               <UploadComponentHasOne
+                displayPreview={displayPreview}
                 fileDoc={populatedDocs[0]}
                 onRemove={onRemove}
                 readonly={readOnly}

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

@@ -10,6 +10,7 @@ import type { ReloadDoc } from '../types.js'
 import { Button } from '../../../elements/Button/index.js'
 import { useDocumentDrawer } from '../../../elements/DocumentDrawer/index.js'
 import { ThumbnailComponent } from '../../../elements/Thumbnail/index.js'
+import { useConfig } from '../../../providers/Config/index.js'
 import './index.scss'
 
 const baseClass = 'upload-relationship-details'
@@ -21,6 +22,7 @@ type Props = {
   readonly byteSize: number
   readonly className?: string
   readonly collectionSlug: string
+  readonly displayPreview?: boolean
   readonly filename: string
   readonly id?: number | string
   readonly mimeType: string
@@ -41,6 +43,7 @@ export function RelationshipContent(props: Props) {
     byteSize,
     className,
     collectionSlug,
+    displayPreview,
     filename,
     mimeType,
     onRemove,
@@ -52,6 +55,12 @@ export function RelationshipContent(props: Props) {
     y,
   } = props
 
+  const { config } = useConfig()
+  const collectionConfig =
+    'collections' in config
+      ? config.collections.find((collection) => collection.slug === collectionSlug)
+      : undefined
+
   const [DocumentDrawer, _, { openDrawer }] = useDocumentDrawer({
     id: src ? id : undefined,
     collectionSlug,
@@ -80,17 +89,20 @@ export function RelationshipContent(props: Props) {
   }
 
   const metaText = withMeta ? generateMetaText(mimeType, byteSize) : ''
+  const previewAllowed = displayPreview ?? collectionConfig.upload?.displayPreview ?? true
 
   return (
     <div className={[baseClass, className].filter(Boolean).join(' ')}>
       <div className={`${baseClass}__imageAndDetails`}>
-        <ThumbnailComponent
-          alt={alt}
-          className={`${baseClass}__thumbnail`}
-          filename={filename}
-          fileSrc={thumbnailSrc}
-          size="small"
-        />
+        {previewAllowed && (
+          <ThumbnailComponent
+            alt={alt}
+            className={`${baseClass}__thumbnail`}
+            filename={filename}
+            fileSrc={thumbnailSrc}
+            size="small"
+          />
+        )}
         <div className={`${baseClass}__details`}>
           <p className={`${baseClass}__filename`}>
             {src ? (

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

@@ -35,6 +35,8 @@ export function UploadComponent(props: UploadFieldClientProps) {
 
   const { config } = useConfig()
 
+  const displayPreview = field.displayPreview
+
   const memoizedValidate = React.useCallback(
     (value, options) => {
       if (typeof validate === 'function') {
@@ -66,6 +68,7 @@ export function UploadComponent(props: UploadFieldClientProps) {
       className={className}
       Description={Description}
       description={description}
+      displayPreview={displayPreview}
       Error={Error}
       filterOptions={filterOptions}
       hasMany={hasMany}

test/uploads/config.ts

@@ -658,7 +658,9 @@ export default buildConfigWithDefaults({
           type: 'text',
         },
       ],
-      upload: true,
+      upload: {
+        displayPreview: false,
+      },
     },
     {
       slug: relationPreviewSlug,