fix(ui): prefer adminThumbnail even if file is non-image (#11948)

### What?

This PR relaxes the mimeType checks in the thumbnail and file cell
components to accommodate an `adminThumbnail` even if the file is a
non-image. This is useful when, for example, using an `adminThumbnail`
function to retrieve or generate thumbnails for files that are
non-images such as videos.

### Why?
To prioritize an admin thumbnail if/when available on file cells and
upload field thumbnails in both edit and list views.

### How?

By relaxing the mimeType checks in the `Thumbnail` component and instead
lifting that responsibility on the caller of this component. Some of
these checks were not needed as the best-fit helper utility function
will automatically select the thumbnailURL if available or revert to the
original url if no best-fit is found.

Demo of admin thumbnail being loaded on non-image while still selecting
best-fit size for images:

![chrome_2025-04-01_18-56-25](https://github.com/user-attachments/assets/befd3647-92c5-45c6-90e2-87459bca8bea)

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

@@ -30,9 +30,12 @@ export const FileCell: React.FC<FileCellProps> = ({
   const previewAllowed = fieldPreviewAllowed ?? collectionConfig.upload?.displayPreview ?? true
 
   if (previewAllowed) {
-    let fileSrc: string | undefined = rowData?.thumbnailURL ?? rowData?.url
+    const isFileImage = isImage(rowData?.mimeType)
+    let fileSrc: string | undefined = isFileImage
+      ? rowData?.thumbnailURL || rowData?.url
+      : rowData?.thumbnailURL
 
-    if (isImage(rowData?.mimeType)) {
+    if (isFileImage) {
       fileSrc = getBestFitFromSizes({
         sizes: rowData?.sizes,
         thumbnailURL: rowData?.thumbnailURL,

packages/ui/src/elements/Thumbnail/index.tsx

@@ -21,13 +21,13 @@ export type ThumbnailProps = {
 }
 
 export const Thumbnail: React.FC<ThumbnailProps> = (props) => {
-  const { className = '', doc: { filename, mimeType } = {}, fileSrc, imageCacheTag, size } = props
+  const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props
   const [fileExists, setFileExists] = React.useState(undefined)
 
   const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')
 
   React.useEffect(() => {
-    if (!fileSrc || (typeof mimeType === 'string' && !mimeType.startsWith('image'))) {
+    if (!fileSrc) {
       setFileExists(false)
       return
     }
@@ -41,7 +41,7 @@ export const Thumbnail: React.FC<ThumbnailProps> = (props) => {
     img.onerror = () => {
       setFileExists(false)
     }
-  }, [fileSrc, mimeType])
+  }, [fileSrc])
 
   let src: null | string = null
 

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

@@ -99,7 +99,7 @@ export function RelationshipContent(props: Props) {
             alt={alt}
             className={`${baseClass}__thumbnail`}
             filename={filename}
-            fileSrc={isImage(mimeType) && thumbnailSrc}
+            fileSrc={thumbnailSrc}
             size="small"
           />
         )}