From 32cc1a5761b1940dcc41f67254beb126d3b390c4 Mon Sep 17 00:00:00 2001
From: Tylan Davis <89618855+tylandavis@users.noreply.github.com>
Date: Fri, 6 Sep 2024 17:28:50 -0400
Subject: [PATCH] fix(ui): missing thumbnail for non-image files in bulk upload
 sidebar (#8102)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Uses the `Thumbnail` component used in other places for the bulk upload
file rows. Closes #8099

In the future, we should consider adding different thumbnail icons based
on the `mimeType` to better describe the files being uploaded.

Before:
![Screenshot 2024-09-06 at 4 51
56 PM](https://github.com/user-attachments/assets/35cd528c-5086-465e-8d3c-7bb66d7c35da)


After:
![Screenshot 2024-09-06 at 4 50
12 PM](https://github.com/user-attachments/assets/54d2b98d-ac11-481e-abe5-4be071c3c8f2)


- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] Existing test suite passes locally with my changes
- [ ] I have made corresponding changes to the documentation
---
 .../ui/src/elements/BulkUpload/FileSidebar/index.scss    | 8 ++++----
 .../ui/src/elements/BulkUpload/FileSidebar/index.tsx     | 9 ++++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss b/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
index 1135d31fd..b17a358c9 100644
--- a/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
+++ b/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
@@ -82,12 +82,12 @@
       background-color: var(--theme-elevation-100);
     }
 
-    img {
-      width: 25px;
-      height: 25px;
+    .thumbnail {
+      width: base(1.2);
+      height: base(1.2);
       flex-shrink: 0;
       object-fit: cover;
-      border-radius: var(--style-radius-m);
+      border-radius: var(--style-radius-s);
     }
 
     p {
diff --git a/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx b/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx
index ad0db279e..b5d9f99da 100644
--- a/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx
+++ b/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx
@@ -2,6 +2,7 @@
 
 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'
 
@@ -13,6 +14,7 @@ import { Drawer } from '../../Drawer/index.js'
 import { ErrorPill } from '../../ErrorPill/index.js'
 import { Pill } from '../../Pill/index.js'
 import { ShimmerEffect } from '../../ShimmerEffect/index.js'
+import { Thumbnail } from '../../Thumbnail/index.js'
 import { Actions } from '../ActionsBar/index.js'
 import { AddFilesView } from '../AddFilesView/index.js'
 import { useFormsManager } from '../FormsManager/index.js'
@@ -144,7 +146,12 @@ export function FileSidebar() {
                     onClick={() => setActiveIndex(index)}
                     type="button"
                   >
-                    <img alt={currentFile.name} src={URL.createObjectURL(currentFile)} />
+                    <Thumbnail
+                      className={`${baseClass}__thumbnail`}
+                      fileSrc={
+                        isImage(currentFile.type) ? URL.createObjectURL(currentFile) : undefined
+                      }
+                    />
                     <div className={`${baseClass}__fileDetails`}>
                       <p className={`${baseClass}__fileName`} title={currentFile.name}>
                         {currentFile.name}