Browse Source

Add fallback for images

Allow fallback for image data.
pull/1/head
TheoryOfNekomata 1 year ago
parent
commit
e78a7ead93
4 changed files with 26 additions and 16 deletions
  1. +20
    -15
      packages/web-kitchensink-reactnext/src/categories/blob/react/components/ImageFilePreview/index.tsx
  2. +1
    -0
      packages/web-kitchensink-reactnext/src/categories/blob/react/hooks/blob/metadata.ts
  3. +1
    -1
      packages/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx
  4. +4
    -0
      packages/web-kitchensink-reactnext/src/utils/blob.ts

+ 20
- 15
packages/web-kitchensink-reactnext/src/categories/blob/react/components/ImageFilePreview/index.tsx View File

@@ -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'


+ 1
- 0
packages/web-kitchensink-reactnext/src/categories/blob/react/hooks/blob/metadata.ts View File

@@ -15,6 +15,7 @@ export const useAugmentedFile = <T extends Partial<File>>(options = {} as UseAug
return;
}

setError(undefined);
augmentFunction(file)
.then((theAugmentedFile) => {
setAugmentedFile(theAugmentedFile);


+ 1
- 1
packages/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx View File

@@ -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>


+ 4
- 0
packages/web-kitchensink-reactnext/src/utils/blob.ts View File

@@ -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',


Loading…
Cancel
Save