From 21a1cb05850ca2c052f59a659fc339848aa9a27b Mon Sep 17 00:00:00 2001
From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com>
Date: Wed, 20 Nov 2024 10:57:01 +0100
Subject: [PATCH] Use globalthis

---
 packages/components/CHANGELOG.md                   |  2 +-
 packages/components/src/form-file-upload/index.tsx | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 901de349bd777b..fc1b1e7a6348dc 100644
--- a/packages/components/CHANGELOG.md
+++ b/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
 
diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx
index c9cea3999cc10b..5d3274dd5b3622 100644
--- a/packages/components/src/form-file-upload/index.tsx
+++ b/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`