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]>
karthick-murugan · Nov 13, 2024 · 997accf · 997accf
1 parent 0770be1
commit 997accf
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/packages/components/src/form-file-upload/index.tsx b/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"