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

…Safari (#67139) * Revert "Ensure HEIC files selectable from “Upload” button (#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]>
WordPress · Nov 20, 2024 · ae9cc64 · ae9cc64
1 parent ab68567
commit ae9cc64
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,17 @@
 
 ### 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)).
+-   `TextControl`: Deprecate 36px default size ([#66745](https://github.com/WordPress/gutenberg/pull/66745).
+-   `FontSizePicker`: Deprecate 36px default size ([#66920](https://github.com/WordPress/gutenberg/pull/66920)).
+-   `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)).
+
+### Bug Fixes
+
 -   `ToggleGroupControl`: Don't set value on focus after a reset ([#66151](https://github.com/WordPress/gutenberg/pull/66151)).
 
 ## 28.8.6 (2024-10-14)

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">