FormFileUpload: Prevent HEIC and HEIF files from being uploaded on …

…Safari (WordPress#67139) * Revert "Ensure HEIC files selectable from “Upload” button (WordPress#66292)" This reverts commit c5921d7. * Update changelog * Make it Safari conditional * Remove extra whitespaces * Update changelog * Use globalthis * Forgot a # * Make it safer Co-authored-by: cbravobernal <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: azaozz <[email protected]> Co-authored-by: desrosj <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: jsnajdr <[email protected]>
carstingaxion · Nov 20, 2024 · ebf1149 · ebf1149
1 parent 2eeb127
commit ebf1149
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-  `FormFileUpload`: Prevent HEIC and HEIF files from being uploaded on Safari ([#67139](https://github.com/WordPress/gutenberg/pull/67139)).
+
 ### Deprecations
 
 -   `DimensionControl`: Deprecate 36px default size ([#66705](https://github.com/WordPress/gutenberg/pull/66705)).

diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx
@@ -50,9 +50,15 @@ export function FormFileUpload( {
 	// @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;
+	// Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
+	const isSafari =
+		globalThis.window?.navigator.userAgent.includes( 'Safari' ) &&
+		! globalThis.window?.navigator.userAgent.includes( 'Chrome' ) &&
+		! globalThis.window?.navigator.userAgent.includes( 'Chromium' );
+	const compatAccept =
+		! isSafari && !! accept?.includes( 'image/*' )
+			? `${ accept }, image/heic, image/heif`
+			: accept;
 
 	return (
 		<div className="components-form-file-upload">