Add fallback for images

Allow fallback for image data.

packages/web-kitchensink-reactnext/src/categories/blob/react/components/ImageFilePreview/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {augmentImageFile, getMimeTypeDescription} from '@/utils/blob';
+import {augmentImageFile, FallbackFile, getMimeTypeDescription} from '@/utils/blob';
 import {formatFileSize, formatNumeral} from '@/utils/numeral';
 import clsx from 'clsx';
 import {useAugmentedFile, useImageControls} from '@/categories/blob/react';
@@ -7,7 +7,7 @@ import {useAugmentedFile, useImageControls} from '@/categories/blob/react';
 type ImageFilePreviewDerivedComponent = HTMLImageElement;
 
 export interface ImageFilePreviewProps extends Omit<React.HTMLProps<ImageFilePreviewDerivedComponent>, 'src' | 'alt'> {
-  file?: File;
+  file?: File | FallbackFile;
   disabled?: boolean;
 }
 
@@ -19,14 +19,14 @@ export const ImageFilePreview = React.forwardRef<ImageFilePreviewDerivedComponen
   ...etcProps
 }, forwardedRef) => {
   const { augmentedFile, error } = useAugmentedFile({
-    file,
+    file: file as File,
     augmentFunction: augmentImageFile,
   });
   const { fullScreen, handleAction, imageRef, filenameRef } = useImageControls({
     forwardedRef,
   });
 
-  if (!augmentedFile) {
+  if (!(augmentedFile)) {
     return null;
   }
 
@@ -96,17 +96,22 @@ export const ImageFilePreview = React.forwardRef<ImageFilePreviewDerivedComponen
               {getMimeTypeDescription(augmentedFile.type, augmentedFile.name)}
             </dd>
           </div>
-          <div className="w-full">
-            <dt className="sr-only">
-              Size
-            </dt>
-            <dd
-              className="m-0 w-full text-ellipsis overflow-hidden"
-              title={`${formatNumeral(augmentedFile.size ?? 0)} bytes`}
-            >
-              {formatFileSize(augmentedFile.size)}
-            </dd>
-          </div>
+          {
+            typeof augmentedFile?.size === 'number'
+            && (
+              <div className="w-full">
+                <dt className="sr-only">
+                  Size
+                </dt>
+                <dd
+                  className="m-0 w-full text-ellipsis overflow-hidden"
+                  title={`${formatNumeral(augmentedFile.size ?? 0)} bytes`}
+                >
+                  {formatFileSize(augmentedFile.size)}
+                </dd>
+              </div>
+            )
+          }
           {
             typeof augmentedFile.metadata?.width === 'number'
             && typeof augmentedFile.metadata?.height === 'number'

packages/web-kitchensink-reactnext/src/categories/blob/react/hooks/blob/metadata.ts

@@ -15,6 +15,7 @@ export const useAugmentedFile = <T extends Partial<File>>(options = {} as UseAug
       return;
     }
 
+    setError(undefined);
     augmentFunction(file)
       .then((theAugmentedFile) => {
         setAugmentedFile(theAugmentedFile);

packages/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx

@@ -43,7 +43,7 @@ const BlobPage: NextPage = () => {
       <Section title="ImageFilePreview">
         <Subsection title="Single File">
           <BlobReact.ImageFilePreview
-            file={imageFile}
+            file={imageFile ?? { name: 'image.png', type: 'image/png', metadata: { previewUrl: '/image.png' } }}
             className="sm:h-64"
           />
         </Subsection>

packages/web-kitchensink-reactnext/src/utils/blob.ts

@@ -5,6 +5,10 @@ import {getImageMetadata} from './image';
 import {getAudioMetadata} from './audio';
 import {getVideoMetadata} from '@/utils/video';
 
+export interface FallbackFile extends Partial<File> {
+  metadata?: Record<string, unknown>;
+}
+
 const MIME_TYPE_DESCRIPTIONS = {
   'image/gif': 'GIF Image',
   'image/jpeg': 'JPEG Image',