diff --git a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/file-type-icon-map.tsx b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/file-type-icon-map.tsx index 8df50d0e..6960edd4 100644 --- a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/file-type-icon-map.tsx +++ b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/file-type-icon-map.tsx @@ -8,28 +8,24 @@ import { } from 'app/atoms/icons-colored'; // Map mime types to their respective JSX icon elements -export const fileTypeIconsMap = { - 'application/pdf': , - 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ( - - ), - 'application/msword': , - 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': , - 'application/vnd.ms-excel': , - 'application/vnd.ms-powerpoint': , - 'application/vnd.openxmlformats-officedocument.presentationml.presentation': ( - - ), - 'application/zip': , - 'application/x-rar-compressed': , - 'application/x-tar': , - 'application/x-7z-compressed': , - 'application/x-bzip': , - 'application/x-bzip2': , - 'application/x-gzip': , - 'video/mp4': , - 'video/mpeg': , - 'video/ogg': , - 'video/webm': , - 'video/quicktime': , +export const fileTypeIconsMap: Record = { + pdf: , + doc: , + docx: , + xls: , + xlsx: , + ppt: , + pptx: , + zip: , + rar: , + tar: , + '7z': , + bz: , + bz2: , + gz: , + mp4: , + mpeg: , + ogg: , + webm: , + mov: , }; diff --git a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx index 2c66893f..eeb99735 100644 --- a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx +++ b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx @@ -30,11 +30,11 @@ const PendingRootRow = ({ const { restore } = useDriveActions(); const { refresh, children } = useDriveItem(item?.parent_id || ''); - const firstPendingFile = root.items[0]; const uploadedFilesSize = root.uploadedSize; const uploadProgress = Math.floor((uploadedFilesSize / root.size) * 100); const isUploadCompleted = root.status === 'completed'; const isFileRoot = rootKey.includes('.'); + const fileType = isFileRoot ? rootKey.split('.').pop() : ''; // Callback function to open the folder after the upload is completed const handleShowFolder = useCallback(() => { @@ -122,7 +122,7 @@ const PendingRootRow = ({ - {itemTypeIcon(firstPendingFile?.type)} + {itemTypeIcon(fileType || '')} @@ -163,9 +163,9 @@ const PendingRootRow = ({ ) : ( !['cancelled', 'failed'].includes(root.status) && - firstPendingFile?.status !== 'error' && ( + root?.status !== 'error' && ( <> - {root.status === 'paused' ? ( + {root.status === 'failed' ? ( pauseOrResumeRootUpload(rootKey)} className="hover:bg-blue-100 p-2 rounded-md transition-all duration-200 testid:upload-root-modal-row-resume"
@@ -163,9 +163,9 @@ const PendingRootRow = ({ ) : ( !['cancelled', 'failed'].includes(root.status) && - firstPendingFile?.status !== 'error' && ( + root?.status !== 'error' && ( <> - {root.status === 'paused' ? ( + {root.status === 'failed' ? ( pauseOrResumeRootUpload(rootKey)} className="hover:bg-blue-100 p-2 rounded-md transition-all duration-200 testid:upload-root-modal-row-resume"