Ensure HEIC files selectable from “Upload” button

[adamsilverstein]

Fixes #66291.

This may be an upstream Chrome bug, see https://core.trac.wordpress.org/ticket/62268

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: adamsilverstein <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: swissspidy <[email protected]>
Co-authored-by: ironprogrammer <[email protected]>
Co-authored-by: ndiego <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: getdave <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ironprogrammer]

Thank you for the PR, @adamsilverstein!

In my testing, this resolves the issue, and allows HEIC files to be selected for upload on the post screen. ✅

[swissspidy]

For testing, what if the server doesn‘t support HEIC?

[ndiego]

For testing, what if the server doesn‘t support HEIC?

Yeah, while this fix addresses the situation where an HEIC image is not selectable, there is still an issue with HEIC images being uploadable when they shouldn't be.

In the video below, I tested in Playground, which does not include ImageMagick. In this situation, I don't think you should be able to upload an HEIC image. Now, it's important to note that this behavior currently exists in 6.6.

So, it's not a regression, but it's still an unfortunate bug that will become more noticeable once 6.7 is out and people start trying to use HEIC images when they are not supported.

heic-bug.mp4

[afercia]

Related: #66293

[Mamaduka]

Instead of updating all individual uses, maybe we should enhance the FormFileUpload component when the accept prop contains image/*. I believe all accept props from different components are passed down to it at the end.

[adamsilverstein]

Instead of updating all individual uses, maybe we should enhance the FormFileUpload component when the accept prop contains image/*. I believe all accept props from different components are passed down to it at the end.

That makes sense and it would be easier to revert if/when Chrome lands the fix in stable as well. I looked at that originally, but since FormFileUpload could be used elsewhere there would need to be added logic to only add the type when uploading images as you said, adding some complexity.

I can rework with that approach.

[adamsilverstein]

In the video below, I tested in Playground, which does not include ImageMagick. In this situation, I don't think you should be able to upload an HEIC image. Now, it's important to note that this behavior currently exists in 6.6.

You shouldn't be able to upload HEIC files when the server doesn't support them. This is a completely separate issue from being able to select HEIC images in the file upload button though.

It looks like core media handles this correctly, but not in Gutenberg. This issue should address that: #66293

[Mamaduka]

@adamsilverstein, a bit of naive logic below, but I think it should do the trick.

// @todo: Explain the need for the `image/heic` type and link the Chrome bug.
const compatAccept = !! accept?.includes( 'image/*' )
	? `${ accept }, image/heic`
	: accept;

[swissspidy]

This should probably also add image/heif btw

[adamsilverstein]

This should probably also add image/heif btw

We can, although I have yet to locate an image with the mime type image/heif...

[swissspidy]

There was just one added to https://core.trac.wordpress.org/ticket/62272 yesterday

[adamsilverstein]

Note: this has been fixed upstream in Chromium; I'm not sure how long that fix takes to make it to the Stable channel.

https://chromium-review.googlesource.com/c/chromium/src/+/5967494

[getdave]

Testing this now with a view to bring into the packages release for the final RC3 of WP 6.7.

[getdave]

I tested this and confirmed that this allows selection of HEIC images. The rationale for the fix is good and I think we should bring this into WordPress 6.7.

[github-actions]

I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: 5d0412a