feat: Set src as key on Thumbnail instances to force the re-render when src change

Author: willybrauner

Diff for: packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx

@@ -2,7 +2,6 @@
 
 import { useModal } from '@faceless-ui/modal'
 import { useWindowInfo } from '@faceless-ui/window-info'
-import { isImage } from 'payload/shared'
 import React from 'react'
 import AnimateHeightImport from 'react-animate-height'
 
@@ -157,7 +156,8 @@ export function FileSidebar() {
                   >
                     <Thumbnail
                       className={`${baseClass}__thumbnail`}
-                      fileSrc={isImage(currentFile.type) ? thumbnailUrls[index] : undefined}
+                      fileSrc={thumbnailUrls[index]}
+                      key={thumbnailUrls[index]}
                     />
                     <div className={`${baseClass}__fileDetails`}>
                       <p className={`${baseClass}__fileName`} title={currentFile.name}>

Diff for: packages/ui/src/elements/BulkUpload/FormsManager/index.tsx

@@ -117,8 +117,7 @@ export function FormsManagerProvider({ children }: FormsManagerProps) {
         processedFiles.current.add(file)
 
         // Generate thumbnail and update ref
-        const thumbnailUrl = await createThumbnail(file)
-        newThumbnails[i] = thumbnailUrl
+        newThumbnails[i] = await createThumbnail(file, null, file.type)
         thumbnailUrlsRef.current = newThumbnails
 
         // Trigger re-render in batches

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

@@ -16,6 +16,7 @@ export const FileCell: React.FC<FileCellProps> = ({
   rowData,
 }) => {
   const { collectionSlug, uploadConfig } = customCellContext
+  const src = rowData?.thumbnailURL || rowData?.url
 
   return (
     <div className={baseClass}>
@@ -26,7 +27,8 @@ export const FileCell: React.FC<FileCellProps> = ({
           ...rowData,
           filename,
         }}
-        fileSrc={rowData?.thumbnailURL || rowData?.url}
+        fileSrc={src}
+        key={src}
         size="small"
         uploadConfig={uploadConfig}
       />

Diff for: packages/ui/src/elements/Upload/index.tsx

@@ -326,7 +326,9 @@ export const Upload: React.FC<UploadProps> = (props) => {
               <div className={`${baseClass}__thumbnail-wrap`}>
                 <Thumbnail
                   collectionSlug={collectionSlug}
-                  fileSrc={isImage(value.type) ? fileSrc : null}
+                  doc={{ mimeType: value.type }}
+                  fileSrc={fileSrc}
+                  key={fileSrc}
                 />
               </div>
               <div className={`${baseClass}__file-adjustments`}>