Skip to content

Commit

Permalink
FormFileUpload: Prevent HEIC and HEIF files from being uploaded on …
Browse files Browse the repository at this point in the history 
…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]>
  • Loading branch information
@cbravobernal @mirka
@azaozz @desrosj @Mamaduka @jsnajdr
7 people authored Nov 20, 2024
1 parent 2eeb127 commit ebf1149
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 3 deletions.
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)).
Expand Down
12 changes: 9 additions & 3 deletions packages/components/src/form-file-upload/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

1 comment on commit ebf1149

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in ebf1149.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11934087964
📝 Reported issues:

Please sign in to comment.