move “image/heic” addition to FormFileUpload component

adamsilverstein · Oct 23, 2024 · 1a139f6 · 1a139f6
1 parent 33b5e17
commit 1a139f6
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js
@@ -361,7 +361,7 @@ function BackgroundImageControls( {
 				mediaId={ id }
 				mediaURL={ url }
 				allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
-				accept="image/*, image/heic"
+				accept="image/*"
 				onSelect={ onSelectMedia }
 				popoverProps={ {
 					className: clsx( {

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -461,7 +461,7 @@ export function ImageEdit( {
 					onSelectURL={ onSelectURL }
 					onError={ onUploadError }
 					placeholder={ placeholder }
-					accept="image/*, image/heic"
+					accept="image/*"
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					handleUpload={ ( files ) => files.length === 1 }
 					value={ { id, src } }

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -564,7 +564,7 @@ export default function Image( {
 					mediaId={ id }
 					mediaURL={ url }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="image/*, image/heic"
+					accept="image/*"
 					onSelect={ onSelectImage }
 					onSelectURL={ onSelectURL }
 					onError={ onUploadError }

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -301,7 +301,7 @@ export default function PostFeaturedImageEdit( {
 		image = (
 			<MediaPlaceholder
 				onSelect={ onSelectImage }
-				accept="image/*, image/heic"
+				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				onError={ onUploadError }
 				placeholder={ placeholder }
@@ -363,7 +363,7 @@ export default function PostFeaturedImageEdit( {
 						mediaId={ featuredImage }
 						mediaURL={ mediaUrl }
 						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						accept="image/*, image/heic"
+						accept="image/*"
 						onSelect={ onSelectImage }
 						onError={ onUploadError }
 						onReset={ () => setFeaturedImage( 0 ) }

diff --git a/packages/components/src/form-file-upload/README.md b/packages/components/src/form-file-upload/README.md
@@ -9,7 +9,7 @@ import { FormFileUpload } from '@wordpress/components';
 
 const MyFormFileUpload = () => (
 	<FormFileUpload
-		accept="image/*, image/heic"
+		accept="image/*"
 		onChange={ ( event ) => console.log( event.currentTarget.files ) }
 	>
 		Upload

diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx
@@ -18,7 +18,7 @@ import type { FormFileUploadProps } from './types';
  *
  * const MyFormFileUpload = () => (
  *   <FormFileUpload
- *     accept="image/*, image/heic"
+ *     accept="image/*"
  *     onChange={ ( event ) => console.log( event.currentTarget.files ) }
  *   >
  *     Upload
@@ -47,6 +47,12 @@ export function FormFileUpload( {
 			{ children }
 		</Button>
 	);
+	// @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
+	// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
+	// This can be removed once the Chromium fix is in the stable channel.
+	const compatAccept = !! accept?.includes( 'image/*' )
+		? `${ accept }, image/heic`
+		: accept;
 
 	return (
 		<div className="components-form-file-upload">
@@ -56,7 +62,7 @@ export function FormFileUpload( {
 				ref={ ref }
 				multiple={ multiple }
 				style={ { display: 'none' } }
-				accept={ accept }
+				accept={ compatAccept }
 				onChange={ onChange }
 				onClick={ onClick }
 				data-testid="form-file-upload-input"