fix: Render fallback on image if mimeType doesn't match with video type

Author: willybrauner

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

@@ -54,17 +54,19 @@ export const Thumbnail = (props: ThumbnailProps) => {
   return (
     <div className={classNames}>
       {fileExists === undefined && <ShimmerEffect height="100%" />}
-      {fileExists && fileType === 'image' && <img alt={alt} src={src} />}
-      {fileExists && fileType === 'video' && (
-        <video
-          aria-label={alt}
-          autoPlay={false}
-          controls={false}
-          muted={true}
-          playsInline={true}
-          src={src}
-        />
-      )}
+      {fileExists &&
+        (fileType === 'video' ? (
+          <video
+            aria-label={alt}
+            autoPlay={false}
+            controls={false}
+            muted={true}
+            playsInline={true}
+            src={src}
+          />
+        ) : (
+          <img alt={alt} src={src} />
+        ))}
       {fileExists === false && <File />}
     </div>
   )

Diff for: test/uploads/e2e.spec.ts

@@ -262,7 +262,7 @@ describe('uploads', () => {
     await page.goto(customFileNameURL.create)
     await page.setInputFiles('input[type="file"]', path.resolve(dirname, './image.png'))
 
-    // await expect(page.locator('.file-field__upload .thumbnail img')).toBeVisible()
+    await expect(page.locator('.file-field__upload .thumbnail img')).toBeVisible()
 
     await saveDocAndAssert(page)