tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
### 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
This commit is contained in:
Jessica Chowdhury
2025-03-07 12:49:20 +00:00
committed by GitHub
parent 6699844d7b
commit 6f90d62fc2
9 changed files with 83 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx
View File

@@ -38,9 +38,12 @@ 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>
{previewAllowed && (
<Thumbnail
// size="small"
className={`${baseClass}__thumbnail`}
@@ -49,6 +52,7 @@ export const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {
imageCacheTag={imageCacheTag}
uploadConfig={uploadConfig}
/>
)}
<div className={`${baseClass}__main-detail`}>
<FileMeta
filename={filename as string}

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

@@ -21,8 +21,13 @@ export interface FileCellProps
export const FileCell: React.FC<FileCellProps> = ({
cellData: filename,
collectionConfig,
field,
rowData,
}) => {
const fieldPreviewAllowed = 'displayPreview' in field ? field.displayPreview : undefined
const previewAllowed = fieldPreviewAllowed ?? collectionConfig.upload?.displayPreview ?? true
if (previewAllowed) {
return (
<div className={baseClass}>
<Thumbnail
@@ -39,4 +44,7 @@ export const FileCell: React.FC<FileCellProps> = ({
<span className={`${baseClass}__filename`}>{String(filename)}</span>
</div>
)
} else {
return <>{String(filename)}</>
}
}

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

@@ -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 = (

15
packages/ui/src/fields/Upload/HasMany/index.tsx
View File

@@ -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}

4
packages/ui/src/fields/Upload/HasOne/index.tsx
View File

@@ -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}

4
packages/ui/src/fields/Upload/Input.tsx
View File

@@ -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}

12
packages/ui/src/fields/Upload/RelationshipContent/index.tsx
View File

@@ -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,10 +89,12 @@ 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`}>
{previewAllowed && (
<ThumbnailComponent
alt={alt}
className={`${baseClass}__thumbnail`}
@@ -91,6 +102,7 @@ export function RelationshipContent(props: Props) {
fileSrc={thumbnailSrc}
size="small"
/>
)}
<div className={`${baseClass}__details`}>
<p className={`${baseClass}__filename`}>
{src ? (

3
packages/ui/src/fields/Upload/index.tsx
View File

@@ -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}

4
test/uploads/config.ts
View File

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