Ensure HEIC files selectable from “Upload” button (WordPress#66292)

* Ensure HEIC files selectable from “Upload” button

* Update packages/components/src/form-file-upload/index.tsx

Co-authored-by: George Mamadashvili <[email protected]>

* move “image/heic” addition to FormFileUpload component

* add image/heif

---------

Co-authored-by: adamsilverstein <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: swissspidy <[email protected]>
Co-authored-by: ironprogrammer <[email protected]>
Co-authored-by: ndiego <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: getdave <[email protected]>

Author: 7 people

packages/components/src/form-file-upload/index.tsx

@@ -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, image/heif`
+		: 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"