@uppy/components: add imageThumbnail prop to FilesList/FilesGrid (#5985)

Ref:
https://community.transloadit.com/t/is-it-possible-to-display-the-thumbnail-of-the-images-in-the-listbox/17711/3

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds an optional `imageThumbnail` prop to `FilesList` and `FilesGrid`
to control passing `images` to `Thumbnail` (default true in grid).
> 
> - **Components (@uppy/components)**
>   - **FilesGrid (`packages/@uppy/components/src/FilesGrid.tsx`)**
>     - Add `imageThumbnail?: boolean` prop (defaults to `true`).
> - Pass `images={imageThumbnail}` to `Thumbnail` instead of hardcoded
`images`.
>   - **FilesList (`packages/@uppy/components/src/FilesList.tsx`)**
>     - Add `imageThumbnail?: boolean` prop.
>     - Pass `images={imageThumbnail}` to `Thumbnail` (32px preview).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
a3ab18558e. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

.changeset/swift-pens-flow.md

@@ -0,0 +1,5 @@
+---
+"@uppy/components": patch
+---
+
+add imageThumbnail prop to FilesList/FilesGrid

packages/@uppy/components/src/FilesGrid.tsx

@@ -9,12 +9,13 @@ import type { UppyContext } from './types.js'
 export type FilesGridProps = {
   editFile?: (file: UppyFile<Meta, Body>) => void
   columns?: number
+  imageThumbnail?: boolean
   ctx: UppyContext
 }
 
 export default function FilesGrid(props: FilesGridProps) {
   const [files, setFiles] = useState<UppyFile<Meta, Body>[]>(() => [])
-  const { ctx, editFile } = props
+  const { ctx, editFile, imageThumbnail = true } = props
 
   function gridColsClass() {
     return (
@@ -59,7 +60,7 @@ export default function FilesGrid(props: FilesGridProps) {
           key={file.id}
         >
           <Fragment>
-            <Thumbnail images file={file} />
+            <Thumbnail images={imageThumbnail} file={file} />
             <div className="uppy:w-full uppy-reset">
               <p className="uppy:font-medium uppy:truncate" title={file.name}>
                 {file.name}

packages/@uppy/components/src/FilesList.tsx

@@ -7,12 +7,13 @@ import { Thumbnail, type UppyContext } from './index.js'
 
 export type FilesListProps = {
   editFile?: (file: UppyFile<Meta, Body>) => void
+  imageThumbnail?: boolean
   ctx: UppyContext
 }
 
 export default function FilesList(props: FilesListProps) {
   const [files, setFiles] = useState<UppyFile<any, any>[]>(() => [])
-  const { ctx, editFile } = props
+  const { ctx, editFile, imageThumbnail } = props
 
   useEffect(() => {
     const onStateUpdate: UppyEventMap<any, any>['state-update'] = (
@@ -37,7 +38,12 @@ export default function FilesList(props: FilesListProps) {
           <Fragment>
             <div className="uppy:flex uppy:items-center uppy:gap-2">
               <div className="uppy:w-[32px] uppy:h-[32px]">
-                <Thumbnail width="32px" height="32px" file={file} />
+                <Thumbnail
+                  width="32px"
+                  height="32px"
+                  file={file}
+                  images={imageThumbnail}
+                />
               </div>
 
               <p className="uppy:truncate">{file.name}</p>