feat(ImageBlock): allow types other than images (#693)

* feat(ImageBlock): allow types other than images * enable extensions in imageblock * update extension sets
Frontify · Nov 30, 2023 · d7bbc1f · d7bbc1f
1 parent de58b55
commit d7bbc1f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/packages/image-block/src/ImageBlock.tsx b/packages/image-block/src/ImageBlock.tsx
@@ -2,8 +2,7 @@
 
 import {
     Asset,
-    AssetChooserObjectType,
-    FileExtensionSets,
+    getMimeType,
     useAssetChooser,
     useAssetUpload,
     useBlockAssets,
@@ -16,7 +15,7 @@ import 'tailwindcss/tailwind.css';
 import '@frontify/guideline-blocks-settings/styles';
 import { CaptionPosition, Settings, mapCaptionPositionClasses, ratioValues } from './types';
 import { ImageCaption } from './components/ImageCaption';
-import { IMAGE_ID } from './settings';
+import { ALLOWED_EXTENSIONS, IMAGE_ID } from './settings';
 import {
     BlockItemWrapper,
     BlockProps,
@@ -47,7 +46,9 @@ export const ImageBlock = ({ appBridge }: BlockProps) => {
     const [isLoading, setIsLoading] = useState(false);
     const { blockAssets, deleteAssetIdsFromKey, updateAssetIdsFromKey } = useBlockAssets(appBridge);
     const image = blockAssets?.[IMAGE_ID]?.[0];
-    const [openFileDialog, { selectedFiles }] = useFileInput({ accept: 'image/*' });
+    const [openFileDialog, { selectedFiles }] = useFileInput({
+        accept: getMimeType(ALLOWED_EXTENSIONS).join(','),
+    });
     const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({
         onUploadProgress: () => !isLoading && setIsLoading(true),
     });
@@ -70,8 +71,7 @@ export const ImageBlock = ({ appBridge }: BlockProps) => {
             },
             {
                 selectedValueId: blockAssets[IMAGE_ID]?.[0]?.id,
-                objectTypes: [AssetChooserObjectType.ImageVideo],
-                extensions: FileExtensionSets.Images,
+                extensions: ALLOWED_EXTENSIONS,
             },
         );
     };

diff --git a/packages/image-block/src/components/UploadPlaceholder.tsx b/packages/image-block/src/components/UploadPlaceholder.tsx
@@ -26,7 +26,6 @@ export const UploadPlaceholder = ({
                 onAssetChooseClick={onAssetChooseClick}
                 onDrop={onFilesDrop}
                 isLoading={loading}
-                validFileType={'Images'}
             />
         </div>
     );

diff --git a/packages/image-block/src/settings.ts b/packages/image-block/src/settings.ts
@@ -1,9 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { FileExtensionSets } from '@frontify/app-bridge';
-
 import {
-    AssetChooserObjectType,
+    FileExtensionSets,
     IconEnum,
     NotificationBlockDividerPosition,
     NotificationStyleType,
@@ -24,6 +22,11 @@ const PADDING_CHOICE_ID = 'paddingChoice';
 const PADDING_CUSTOM_ID = 'paddingCustom';
 export const IMAGE_ID = 'image';
 export const ATTACHMENTS_ASSET_ID = 'attachments';
+export const ALLOWED_EXTENSIONS = [
+    ...FileExtensionSets.Images,
+    ...FileExtensionSets.Documents,
+    ...FileExtensionSets.Templates,
+];
 
 export const settings = defineSettings({
     basics: [
@@ -37,8 +40,7 @@ export const settings = defineSettings({
                     type: 'assetInput',
                     label: 'Image',
                     size: 'small',
-                    objectTypes: [AssetChooserObjectType.ImageVideo],
-                    extensions: FileExtensionSets.Images,
+                    extensions: ALLOWED_EXTENSIONS,
                 },
                 {
                     id: 'hasLink',