perf: folder views download only images and get best fit from image sizes (#12514)

Author: akhrarovsaid

packages/payload/src/exports/shared.ts

@@ -55,10 +55,9 @@ export { formatFolderOrDocumentItem } from '../folders/utils/formatFolderOrDocum
 export { validOperators, validOperatorSet } from '../types/constants.js'
 
 export { formatFilesize } from '../uploads/formatFilesize.js'
-
 export { isImage } from '../uploads/isImage.js'
-export { combineWhereConstraints } from '../utilities/combineWhereConstraints.js'
 
+export { combineWhereConstraints } from '../utilities/combineWhereConstraints.js'
 export {
   deepCopyObject,
   deepCopyObjectComplex,
@@ -74,12 +73,14 @@ export {
 } from '../utilities/deepMerge.js'
 
 export { extractID } from '../utilities/extractID.js'
+
 export { fieldSchemaToJSON } from '../utilities/fieldSchemaToJSON.js'
 export { flattenAllFields } from '../utilities/flattenAllFields.js'
-
 export { default as flattenTopLevelFields } from '../utilities/flattenTopLevelFields.js'
+
 export { formatAdminURL } from '../utilities/formatAdminURL.js'
 export { formatLabels, toWords } from '../utilities/formatLabels.js'
+export { getBestFitFromSizes } from '../utilities/getBestFitFromSizes.js'
 export { getDataByPath } from '../utilities/getDataByPath.js'
 
 export { getFieldPermissions } from '../utilities/getFieldPermissions.js'

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

@@ -1,6 +1,9 @@
 import type { CollectionSlug, Document } from '../../index.js'
 import type { FolderOrDocument } from '../types.js'
 
+import { isImage } from '../../uploads/isImage.js'
+import { getBestFitFromSizes } from '../../utilities/getBestFitFromSizes.js'
+
 type Args = {
   folderFieldName: string
   isUpload: boolean
@@ -26,7 +29,15 @@ export function formatFolderOrDocumentItem({
   if (isUpload) {
     itemValue.filename = value.filename
     itemValue.mimeType = value.mimeType
-    itemValue.url = value.url
+    itemValue.url = isImage(value.mimeType)
+      ? getBestFitFromSizes({
+          sizes: value.sizes,
+          targetSizeMax: 520,
+          targetSizeMin: 300,
+          url: value.url,
+          width: value.width,
+        })
+      : undefined
   }
 
   return {

…/ui/src/utilities/getBestFitFromSizes.ts …oad/src/utilities/getBestFitFromSizes.tspackages/ui/src/utilities/getBestFitFromSizes.ts renamed to packages/payload/src/utilities/getBestFitFromSizes.ts packages/ui/src/utilities/getBestFitFromSizes.ts renamed to packages/payload/src/utilities/getBestFitFromSizes.ts

@@ -6,11 +6,10 @@ import type {
   UploadFieldClient,
 } from 'payload'
 
-import { isImage } from 'payload/shared'
+import { getBestFitFromSizes, isImage } from 'payload/shared'
 import React from 'react'
 
 import './index.scss'
-import { getBestFitFromSizes } from '../../../../../utilities/getBestFitFromSizes.js'
 import { Thumbnail } from '../../../../Thumbnail/index.js'
 
 const baseClass = 'file'

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

@@ -11,14 +11,12 @@ import { UploadCard } from '../UploadCard/index.js'
 
 const baseClass = 'upload upload--has-many'
 
-import { isImage } from 'payload/shared'
+import { getBestFitFromSizes, isImage } from 'payload/shared'
 
 import './index.scss'
 
 import type { ReloadDoc } from '../types.js'
 
-import { getBestFitFromSizes } from '../../../utilities/getBestFitFromSizes.js'
-
 type Props = {
   readonly className?: string
   readonly displayPreview?: boolean

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

@@ -2,12 +2,11 @@
 
 import type { JsonObject } from 'payload'
 
-import { isImage } from 'payload/shared'
+import { getBestFitFromSizes, isImage } from 'payload/shared'
 import React from 'react'
 
 import type { ReloadDoc } from '../types.js'
 
-import { getBestFitFromSizes } from '../../../utilities/getBestFitFromSizes.js'
 import './index.scss'
 import { RelationshipContent } from '../RelationshipContent/index.js'
 import { UploadCard } from '../UploadCard/index.js'