chore[sdks]: extend allowed file types of Image and Video block (#3764)

## Description Extends `allowedFileTypes` of Image and Video blocks so that we can restrict our AssetPicker to use these file types moving forward Jira https://builder-io.atlassian.net/browse/ENG-6403 _Screenshot_ If relevant, add a screenshot or two of the changes you made.
BuilderIO · Dec 9, 2024 · 23b7594 · 23b7594
1 parent 76793ce
commit 23b7594
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 8 deletions.
diff --git a/.changeset/nice-balloons-work.md b/.changeset/nice-balloons-work.md
@@ -0,0 +1,13 @@
+---
+"@builder.io/react": patch
+"@builder.io/sdk-angular": patch
+"@builder.io/sdk-react-nextjs": patch
+"@builder.io/sdk-qwik": patch
+"@builder.io/sdk-react": patch
+"@builder.io/sdk-react-native": patch
+"@builder.io/sdk-solid": patch
+"@builder.io/sdk-svelte": patch
+"@builder.io/sdk-vue": patch
+---
+
+Feat: extend allowed file types of Image and Video Block
diff --git a/packages/react/src/blocks/Image.tsx b/packages/react/src/blocks/Image.tsx
@@ -8,6 +8,7 @@ import { BuilderMetaContext } from '../store/builder-meta';
 import { withBuilder } from '../functions/with-builder';
 import { throttle } from '../functions/throttle';
 import { Breakpoints, getSizesForBreakpoints } from '../constants/device-sizes.constant';
+import { IMAGE_FILE_TYPES } from 'src/constants/file-types.constant';
 
 // Taken from (and modified) the shopify theme script repo
 // https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
@@ -442,7 +443,7 @@ export const Image = withBuilder(ImageComponent, {
       name: 'image',
       type: 'file',
       bubble: true,
-      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       required: true,
       defaultValue:
         'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',

diff --git a/packages/react/src/blocks/Video.tsx b/packages/react/src/blocks/Video.tsx
@@ -5,6 +5,7 @@ import React, { PropsWithChildren } from 'react';
 import { throttle } from '../functions/throttle';
 import { withChildren } from '../functions/with-children';
 import { Builder } from '@builder.io/sdk';
+import { IMAGE_FILE_TYPES, VIDEO_FILE_TYPES } from 'src/constants/file-types.constant';
 
 const DEFAULT_ASPECT_RATIO = 0.7004048582995948;
 
@@ -195,7 +196,7 @@ export const Video = Builder.registerComponent(withChildren(VideoComponent), {
     {
       name: 'video',
       type: 'file',
-      allowedFileTypes: ['mp4'],
+      allowedFileTypes: VIDEO_FILE_TYPES,
       bubble: true,
       defaultValue:
         'https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd27731a526464deba0016216f5f9e570%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=d27731a526464deba0016216f5f9e570&alt=media&optimized=true',
@@ -204,7 +205,7 @@ export const Video = Builder.registerComponent(withChildren(VideoComponent), {
     {
       name: 'posterImage',
       type: 'file',
-      allowedFileTypes: ['jpeg', 'png'],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       helperText: 'Image to show before the video plays',
     },
     {

diff --git a/packages/react/src/blocks/raw/Img.tsx b/packages/react/src/blocks/raw/Img.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { BuilderElement } from '@builder.io/sdk';
 import { withBuilder } from '../../functions/with-builder';
+import { IMAGE_FILE_TYPES } from 'src/constants/file-types.constant';
 
 export interface ImgProps {
   attributes?: any;
@@ -36,7 +37,7 @@ export const Img = withBuilder(ImgComponent, {
       name: 'image',
       bubble: true,
       type: 'file',
-      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       required: true,
     },
   ],

diff --git a/packages/react/src/constants/file-types.constant.ts b/packages/react/src/constants/file-types.constant.ts
@@ -0,0 +1,69 @@
+export const IMAGE_FILE_TYPES = [
+  'jpeg',
+  'jpg',
+  'png',
+  'svg',
+  'webp',
+  'gif',
+  'jfif',
+  'pjpeg',
+  'pjp',
+  'apng',
+  'avif',
+  'tif',
+  'tiff',
+  'heif',
+  'bmp',
+  'eps',
+  'raw',
+  'cr2',
+  'nef',
+  'orf',
+  'sr2',
+  'psd',
+  'heic',
+  'dib',
+  'ai',
+];
+
+export const VIDEO_FILE_TYPES = [
+  'mp4',
+  'webm',
+  'mkv',
+  'flv',
+  'vob',
+  'ogv',
+  'ogg',
+  'drc',
+  'gif',
+  'gifv',
+  'mng',
+  'avi',
+  'mov',
+  'qt',
+  'mts',
+  'm2ts',
+  'ts',
+  'wmv',
+  'yuv',
+  'rm',
+  'rmvb',
+  'viv',
+  'asf',
+  'amv',
+  'm4p',
+  'mpeg',
+  'mpe',
+  'm2v',
+  'm4v',
+  'svi',
+  '3gp',
+  '3g2',
+  'mxf',
+  'roq',
+  'nsv',
+  'f4v',
+  'f4p',
+  'f4a',
+  'f4b',
+];
diff --git a/packages/sdks/src/blocks/image/component-info.ts b/packages/sdks/src/blocks/image/component-info.ts
@@ -1,3 +1,4 @@
+import { IMAGE_FILE_TYPES } from '../../constants/file-types.js';
 import type { ComponentInfo } from '../../types/components.js';
 
 export const componentInfo: ComponentInfo = {
@@ -18,7 +19,7 @@ export const componentInfo: ComponentInfo = {
       name: 'image',
       type: 'file',
       bubble: true,
-      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       required: true,
       defaultValue:
         'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',

diff --git a/packages/sdks/src/blocks/img/component-info.ts b/packages/sdks/src/blocks/img/component-info.ts
@@ -1,3 +1,4 @@
+import { IMAGE_FILE_TYPES } from '../../constants/file-types.js';
 import type { ComponentInfo } from '../../types/components.js';
 
 export const componentInfo: ComponentInfo = {
@@ -12,7 +13,7 @@ export const componentInfo: ComponentInfo = {
       name: 'image',
       bubble: true,
       type: 'file',
-      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       required: true,
     },
   ],

diff --git a/packages/sdks/src/blocks/video/component-info.ts b/packages/sdks/src/blocks/video/component-info.ts
@@ -1,3 +1,7 @@
+import {
+  IMAGE_FILE_TYPES,
+  VIDEO_FILE_TYPES,
+} from '../../constants/file-types.js';
 import type { ComponentInfo } from '../../types/components.js';
 
 export const componentInfo: ComponentInfo = {
@@ -14,7 +18,7 @@ export const componentInfo: ComponentInfo = {
     {
       name: 'video',
       type: 'file',
-      allowedFileTypes: ['mp4'],
+      allowedFileTypes: VIDEO_FILE_TYPES,
       bubble: true,
       defaultValue:
         'https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd27731a526464deba0016216f5f9e570%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=d27731a526464deba0016216f5f9e570&alt=media&optimized=true',
@@ -23,7 +27,7 @@ export const componentInfo: ComponentInfo = {
     {
       name: 'posterImage',
       type: 'file',
-      allowedFileTypes: ['jpeg', 'png'],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       helperText: 'Image to show before the video plays',
     },
     {

diff --git a/packages/sdks/src/constants/file-types.ts b/packages/sdks/src/constants/file-types.ts
@@ -0,0 +1,69 @@
+export const IMAGE_FILE_TYPES = [
+  'jpeg',
+  'jpg',
+  'png',
+  'svg',
+  'webp',
+  'gif',
+  'jfif',
+  'pjpeg',
+  'pjp',
+  'apng',
+  'avif',
+  'tif',
+  'tiff',
+  'heif',
+  'bmp',
+  'eps',
+  'raw',
+  'cr2',
+  'nef',
+  'orf',
+  'sr2',
+  'psd',
+  'heic',
+  'dib',
+  'ai',
+];
+
+export const VIDEO_FILE_TYPES = [
+  'mp4',
+  'webm',
+  'mkv',
+  'flv',
+  'vob',
+  'ogv',
+  'ogg',
+  'drc',
+  'gif',
+  'gifv',
+  'mng',
+  'avi',
+  'mov',
+  'qt',
+  'mts',
+  'm2ts',
+  'ts',
+  'wmv',
+  'yuv',
+  'rm',
+  'rmvb',
+  'viv',
+  'asf',
+  'amv',
+  'm4p',
+  'mpeg',
+  'mpe',
+  'm2v',
+  'm4v',
+  'svi',
+  '3gp',
+  '3g2',
+  'mxf',
+  'roq',
+  'nsv',
+  'f4v',
+  'f4p',
+  'f4a',
+  'f4b',
+];