Skip to content

Commit 2211f3d

Browse files
authored
fix: use thumbnailUrl for upload documents in folder view (#13368)
### What? Fix the folder view for upload documents only using `formatFolderOrDocumentItem()` function and only if the upload is an image, even when there's a `thumbnailURL` available. ### Why? Folder view for upload collections (especially those with sharp resizing disabled) renders different thumbnails between the folder view and list view. With sharp resizing disabled and an `adminThumbnail` fn provided, the list view will correctly render optimised images, while the folder view renders full source images - resulting in a huge discrepancy in loaded image sizes. ### How? We're passing the `value.thumbnailURL` **before** the `formatFolderOrDocumentItem()` call rather than passing it directly as a function parameter to cover cases where non-image uploads have a `thumbnailURL` defined. Fixes #13246
1 parent ac40185 commit 2211f3d

File tree

2 files changed

+25
-11
lines changed

2 files changed

+25
-11
lines changed

packages/payload/src/folders/utils/formatFolderOrDocumentItem.ts

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,17 @@ export function formatFolderOrDocumentItem({
3030
if (isUpload) {
3131
itemValue.filename = value.filename
3232
itemValue.mimeType = value.mimeType
33-
itemValue.url = isImage(value.mimeType)
34-
? getBestFitFromSizes({
35-
sizes: value.sizes,
36-
targetSizeMax: 520,
37-
targetSizeMin: 300,
38-
url: value.url,
39-
width: value.width,
40-
})
41-
: undefined
33+
itemValue.url =
34+
value.thumbnailURL ||
35+
(isImage(value.mimeType)
36+
? getBestFitFromSizes({
37+
sizes: value.sizes,
38+
targetSizeMax: 520,
39+
targetSizeMin: 300,
40+
url: value.url,
41+
width: value.width,
42+
})
43+
: undefined)
4244
}
4345

4446
return {

test/folders/collections/Media/index.ts

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,19 @@ import type { CollectionConfig } from 'payload'
22

33
export const Media: CollectionConfig = {
44
slug: 'media',
5-
upload: true,
5+
upload: {
6+
adminThumbnail: ({ doc }) => {
7+
if (doc.testAdminThumbnail && typeof doc.testAdminThumbnail === 'string') {
8+
return doc.testAdminThumbnail
9+
}
10+
return null
11+
},
12+
},
613
folders: true,
7-
fields: [],
14+
fields: [
15+
{
16+
name: 'testAdminThumbnail',
17+
type: 'text',
18+
},
19+
],
820
}

0 commit comments

Comments
 (0)