feat: upload images rendering properly in admin panel (#5215)

test/_community/collections/Media/index.ts

@@ -1,14 +1,9 @@
-import path from 'path'
-
 import type { CollectionConfig } from '../../../../packages/payload/src/collections/config/types'
 
 export const mediaSlug = 'media'
 
 export const MediaCollection: CollectionConfig = {
   slug: mediaSlug,
-  // upload: {
-  //   staticDir: path.resolve(__dirname, './media'),
-  // },
   upload: true,
   access: {
     read: () => true,

test/field-error-states/collections/Upload/index.ts

@@ -5,7 +5,7 @@ import type { CollectionConfig } from '../../../../packages/payload/src/collecti
 const Uploads: CollectionConfig = {
   slug: 'uploads',
   upload: {
-    staticDir: path.resolve(__dirname, './uploads'),
+    staticDir: path.resolve(process.cwd(), 'test/field-error-states/collections/Upload/uploads'),
   },
   fields: [
     {

test/field-error-states/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "paths": {
       "payload/generated-types": ["./payload-types.ts"]

test/uploads/collections/admin-thumbnail/RegisterThumbnailFn.tsx

@@ -0,0 +1,35 @@
+'use client'
+import type React from 'react'
+
+import { useAdminThumbnail } from '../../../../packages/ui/src/hooks/useAdminThumbnail'
+
+type TypeWithFile = {
+  filename: string
+  filesize: number
+  mimeType: string
+} & Record<string, unknown>
+
+function docHasFilename(doc: Record<string, unknown>): doc is TypeWithFile {
+  if (typeof doc === 'object' && 'filename' in doc) {
+    return true
+  }
+  return false
+}
+
+export const adminThumbnailSrc = '/media/image-640x480.png'
+
+function getThumbnailSrc({ doc }) {
+  if (docHasFilename(doc)) {
+    if (doc.mimeType.startsWith('image/')) {
+      return null // Fallback to default admin thumbnail if image
+    }
+    return adminThumbnailSrc // Use custom thumbnail if not image
+  }
+  return null
+}
+
+export const RegisterAdminThumbnailFn: React.FC = () => {
+  void useAdminThumbnail(getThumbnailSrc)
+
+  return null
+}

test/uploads/collections/admin-thumbnail/index.ts

@@ -2,34 +2,13 @@ import path from 'path'
 
 import type { CollectionConfig } from '../../../../packages/payload/src/collections/config/types'
 
-type TypeWithFile = {
-  filename: string
-  filesize: number
-  mimeType: string
-} & Record<string, unknown>
-
-function docHasFilename(doc: Record<string, unknown>): doc is TypeWithFile {
-  if (typeof doc === 'object' && 'filename' in doc) {
-    return true
-  }
-  return false
-}
-
-export const adminThumbnailSrc = '/media/image-640x480.png'
+import { RegisterAdminThumbnailFn } from './RegisterThumbnailFn'
 
 export const AdminThumbnailCol: CollectionConfig = {
   slug: 'admin-thumbnail',
   upload: {
     staticDir: path.resolve(process.cwd(), 'test/uploads/media'),
-    // adminThumbnail: ({ doc }) => {
-    //   if (docHasFilename(doc)) {
-    //     if (doc.mimeType.startsWith('image/')) {
-    //       return null // Fallback to default admin thumbnail if image
-    //     }
-    //     return adminThumbnailSrc // Use custom thumbnail if not image
-    //   }
-    //   return null
-    // },
+    adminThumbnail: RegisterAdminThumbnailFn,
   },
   fields: [],
 }