Display file preview if file is an image

Feature #14684

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/details-panel/file-details.tsx b/src/views-components/details-panel/file-details.tsx
index 7d43bd4b3b331448668817c38f8e552553e33da6..db7c9cfe0f09c27b2eff38c6d02b2f3b6d582ec9 100644 (file)
--- a/src/views-components/details-panel/file-details.tsx
+++ b/src/views-components/details-panel/file-details.tsx
@@ -9,6 +9,7 @@ import { getIcon } from '~/components/file-tree/file-tree-item';
 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
 import { formatFileSize } from '~/common/formatters';
 import { FileThumbnail } from '~/components/file-tree/file-thumbnail';
+import isImage from 'is-image';
 
 export class FileDetails extends DetailsData<CollectionFile | CollectionDirectory> {
 
@@ -22,8 +23,12 @@ export class FileDetails extends DetailsData<CollectionFile | CollectionDirector
         return item.type === CollectionFileType.FILE
             ? <>
                 <DetailsAttribute label='Size' value={formatFileSize(item.size)} />
-                <DetailsAttribute label='Preview' />
-                <FileThumbnail file={item}/>
+                {
+                    isImage(item.url) && <>
+                        <DetailsAttribute label='Preview' />
+                        <FileThumbnail file={item} />
+                    </>
+                }
             </>
             : <div />;
     }