Use globalthis

packages/components/CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Bug Fixes
 
--  `FormFileUpload`: Image Block: Fix transparent pngs not being uploaded correctly on Safari browser. ([67139](https://github.com/WordPress/gutenberg/pull/67139)).
+-  `FormFileUpload`: Prevent HEIC and HEIF files from being uploaded on Safari ([67139](https://github.com/WordPress/gutenberg/pull/67139)).
 
 ### Deprecations
 

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useState, useEffect } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -50,12 +50,11 @@ 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 [ isSafari, setIsSafari ] = useState( false );
-	useEffect( () => {
-		setIsSafari(
-			/^((?!chrome|android).)*safari/i.test( navigator.userAgent )
-		);
-	}, [] );
+	// Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
+	const isSafari =
+		globalThis.navigator?.userAgent.includes( 'Safari' ) &&
+		! globalThis.navigator?.userAgent.includes( 'Chrome' ) &&
+		! globalThis.navigator?.userAgent.includes( 'Chromium' );
 	const compatAccept =
 		! isSafari && !! accept?.includes( 'image/*' )
 			? `${ accept }, image/heic, image/heif`