diff --git a/packages/next/src/views/List/appendUploadSelectFields.ts b/packages/next/src/views/List/appendUploadSelectFields.ts new file mode 100644 index 000000000..bac5d5c0a --- /dev/null +++ b/packages/next/src/views/List/appendUploadSelectFields.ts @@ -0,0 +1,49 @@ +import type { SanitizedCollectionConfig, SelectType } from 'payload' + +/** + * Mutates the incoming select object to append fields required for upload thumbnails + * @param collectionConfig + * @param select + */ +export const appendUploadSelectFields = ({ + collectionConfig, + select, +}: { + collectionConfig: SanitizedCollectionConfig + select: SelectType +}) => { + if (!collectionConfig.upload || !select) { + return + } + + select.mimeType = true + select.thumbnailURL = true + + if (collectionConfig.upload.imageSizes && collectionConfig.upload.imageSizes.length > 0) { + if ( + collectionConfig.upload.adminThumbnail && + typeof collectionConfig.upload.adminThumbnail === 'string' + ) { + /** Only return image size properties that are required to generate the adminThumbnailURL */ + select.sizes = { + [collectionConfig.upload.adminThumbnail]: { + filename: true, + }, + } + } else { + /** Only return image size properties that are required for thumbnails */ + select.sizes = collectionConfig.upload.imageSizes.reduce((acc, imageSizeConfig) => { + return { + ...acc, + [imageSizeConfig.name]: { + filename: true, + url: true, + width: true, + }, + } + }, {}) + } + } else { + select.url = true + } +} diff --git a/packages/next/src/views/List/index.tsx b/packages/next/src/views/List/index.tsx index 682bf5b37..abf32a773 100644 --- a/packages/next/src/views/List/index.tsx +++ b/packages/next/src/views/List/index.tsx @@ -1,19 +1,20 @@ +import type { + AdminViewServerProps, + CollectionPreferences, + Column, + ColumnPreference, + ListQuery, + ListViewClientProps, + ListViewServerPropsOnly, + PaginatedDocs, + QueryPreset, + SanitizedCollectionPermission, +} from 'payload' + import { DefaultListView, HydrateAuthProvider, ListQueryProvider } from '@payloadcms/ui' import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' import { getColumns, renderFilters, renderTable, upsertPreferences } from '@payloadcms/ui/rsc' import { notFound } from 'next/navigation.js' -import { - type AdminViewServerProps, - type CollectionPreferences, - type Column, - type ColumnPreference, - type ListQuery, - type ListViewClientProps, - type ListViewServerPropsOnly, - type PaginatedDocs, - type QueryPreset, - type SanitizedCollectionPermission, -} from 'payload' import { combineWhereConstraints, formatAdminURL, @@ -25,6 +26,7 @@ import { import React, { Fragment } from 'react' import { getDocumentPermissions } from '../Document/getDocumentPermissions.js' +import { appendUploadSelectFields } from './appendUploadSelectFields.js' import { handleGroupBy } from './handleGroupBy.js' import { renderListViewSlots } from './renderListViewSlots.js' import { resolveAllFilterOptions } from './resolveAllFilterOptions.js' @@ -223,6 +225,12 @@ export const renderListView = async ( ? transformColumnsToSelect(columns) : undefined + /** Force select image fields for list view thumbnails */ + appendUploadSelectFields({ + collectionConfig, + select, + }) + try { if (collectionConfig.admin.groupBy && query.groupBy) { ;({ columnState, data, Table } = await handleGroupBy({