Media Uploads: Can't upload .heic and .heif images from Calypso on Atomic sites

[jorpdesigns]

Quick summary

On atomic sites, uploading .heic and .heif files from Calypso fails with this error: "1 file could not be uploaded because an error occurred while uploading."

The workaround is to switch to Classic view (or WP Admin) and upload the file from there. However this workaround is not available on the mobile app (as it does not provide access to Classic view).

Related GH report: https://github.com/Automattic/wp-calypso/issues/55102

Steps to reproduce

1. On an atomic site, go to Media Library and ensure you're on the Default view (Calypso).
2. Upload any sample .heif or .heic files. You can get samples from https://filesamples.com/formats/heif and https://filesamples.com/formats/heic

What you expected to happen

For the file to be uploaded successfully (and converted to a .jpeg file per p1694177549057259-slack-CB0B2G43X).

What actually happened

The upload failed with this error: "1 file could not be uploaded because an error occurred while uploading."

Impact

Most (> 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic

Logs or notes

No response

[hngdny]

Another report 7138717-zd-a8c

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 7138717-zen
• [ ] 7149725-zen
• [ ] 7642877-zen

[cuemarie]

📌 REPRODUCTION RESULTS

• Tested on Atomic – Could Not Replicate

📌 FINDINGS/SCREENSHOTS/VIDEO I'm not able to replicate this issue. On my AT test site, I can upload HEIC files via Calypso without issue.

https://github.com/Automattic/wp-calypso/assets/27249804/772ca592-3e22-44d3-bbef-0fc9507eb515

📌 ACTIONS

• Requested author feedback

📌 Message to Author @jorpdesigns Do you have a test site where this is happening, or an interaction link to a customer report?

---

@hngdny I see in 7138717-zen that the user uploads their images almost solely using the Jetpack App. Is that the environment where they were encountering the upload error? If so, that would warrant a separate report from the one above. Thanks!

[rinazrina]

I can reproduce this issue on my test sites, both with the Business plan and Commerce plan, with only Jetpack plugin active.

I also got a user on 7149725-zd-a8c who has existing HEIC images on the posts, and the images are not showing on the live page. On the editor, the image shows a broken image icon and this image has an empty alt attribute message. Similar to https://github.com/Automattic/dotcom-forge/issues/4095#issuecomment-1748963102.

Screenshot from the post editor:

Advised to convert the images to JPEG and reupload as a workaround.

[Robertght]

Another thing that may be related to this is that on the wp-admin dashboard the .heic images are not visible on AT sites, but they are on Simple sites.

The images in my case were uploaded through the Jetpack app.

Added my case here: https://github.com/Automattic/wp-calypso/issues/82968#issuecomment-1760773989

[cuemarie]

@Automattic/yolo are y'all able to take a look at this?

[danielbachhuber]

@cuemarie Sure, we can debug when we have some time. To confirm, there aren't specific reproduction steps, right?

[cuemarie]

To confirm, there aren't specific reproduction steps, right?

So far not consistent ones – I wasn't able to reproduce this following the steps above, but others are reporting they can.

---

@rinazrina did your steps to repro differ from what's in the original report? If not, can you share the image(s) you tested with, and the Site IDs of the test sites where you were able to reproduce this? Thanks!

[rinazrina]

@cuemarie

did your steps to repro differ from what's in the original report?

No, I did the same steps and I used the sample1 image from this site: https://filesamples.com/formats/heic

My Blog IDs: 191871170 and 161003178

[jromales]

Another report: 7642877-zd-a8c

When adding media in Product editor, HEIC images do not load both in thumbnails and when they are selected.

[pauljacobson]

Another thing that may be related to this is that on the wp-admin dashboard the .heic images are not visible on AT sites, but they are on Simple sites.

Just to echo this, I was testing .heic/.heif image uploads to Simple and plugin-enabled sites. Neither site enabled me to upload the image through the block editor. I saw errors like this:

I noticed that on the Simple site, I could upload the image to the Media library and that the resulting upload was reformatted as a .jpg image. I was not able to upload the image to the Media library on the plugin-enabled site, though:

Console error for the plugin-enabled site:

Uncaught (in promise) UnsupportedMimeTypeError: File type unknown
    e https://wordpress.com/calypso/evergreen/23254.f5ba731b9ee72e3e31d2.min.js:49
    j https://wordpress.com/calypso/evergreen/24636.065c64300c619126ddd9.min.js:7
    q https://wordpress.com/calypso/evergreen/24636.065c64300c619126ddd9.min.js:7
    g https://wordpress.com/calypso/evergreen/24636.065c64300c619126ddd9.min.js:7
    y https://wordpress.com/calypso/evergreen/24636.065c64300c619126ddd9.min.js:7
    js https://wordpress.com/calypso/evergreen/24636.065c64300c619126ddd9.min.js:1
    c https://wordpress.com/media/theatomizertestsite.wpcomstaging.com:28
    js https://wordpress.com/calypso/evergreen/36989.6a7cfa376af34625ebc3.min.js:1
    c https://wordpress.com/media/theatomizertestsite.wpcomstaging.com:28
    js https://wordpress.com/calypso/evergreen/36989.6a7cfa376af34625ebc3.min.js:1
    c https://wordpress.com/media/theatomizertestsite.wpcomstaging.com:28
    js https://wordpress.com/calypso/evergreen/78543.ab02a39abeab46b7dfe8.min.js:9
    c https://wordpress.com/media/theatomizertestsite.wpcomstaging.com:28
    js https://wordpress.com/calypso/evergreen/78543.ab02a39abeab46b7dfe8.min.js:1
    c https://wordpress.com/media/theatomizertestsite.wpcomstaging.com:28
    js https://wordpress.com/calypso/evergreen/entry-main.5db3e14cf0b658f56a6a.min.js:1
    c https://wordpress.com/media/theatomizertestsite.wpcomstaging.com:28
    s https://wordpress.com/calypso/evergreen/entry-main.5db3e14cf0b658f56a6a.min.js:1
    <anonymous> https://wordpress.com/calypso/evergreen/entry-main.5db3e14cf0b658f56a6a.min.js:1
    O https://wordpress.com/media/theatomizertestsite.wpcomstaging.com:28
    <anonymous> https://wordpress.com/calypso/evergreen/entry-main.5db3e14cf0b658f56a6a.min.js:1
    a https://wordpress.com/media/theatomizertestsite.wpcomstaging.com:28
    <anonymous> https://wordpress.com/calypso/evergreen/entry-main.5db3e14cf0b658f56a6a.min.js:1
23254.f5ba731b9ee72e3e31d2.min.js:49:54871

[bogiii]

I've tried to reproduce the issue but without success. The Media library works as expected on simple and atomic.

But I found another case where you want to upload a simple .heic image via the Image block inside the post editor; in that case, the file cannot be selected (same for simple and atomic).

Browser: Chrome - Version 128.0.6613.138

---

In Firefox, everything looks fine except for selecting the Image file in the editor. The file has been successfully uploaded and transformed, but it has not been rendered. There is a message "This image has an empty alt attribute; its file name is sample-7.jpg"

Browser: Firefox - Version 127.0.1

---

In Safari, everything looks fine! Browser: Safari - Version 17.6

[sejas]

I confirm that heif and heic images are not working correctly when uploading from Calypso media page.

Steps to reproduce:

• Access Calypso media in an atomic site. URL: https://wordpress.com/media/{atomic_site_url}.
• Try uploading

I've observed the error: 1 file could not be uploaded because an error occurred while uploading.

And the post request made to :https://public-api.wordpress.com/rest/v1.1/sites/237768838/media/new Returned a HTTP 200, but inside the object it shows a 400 error:

{
    "code": 400,
    "headers": [
        {
            "name": "Content-Type",
            "value": "application\/json"
        }
    ],
    "body": {
        "error": "unsupported_mime_type",
        "message": "File type unknown"
    }
}

See the endpoint: fbhepr%2Skers%2Sjcpbz%2Sjc%2Qpbagrag%2Szh%2Qcyhtvaf%2Swrgcnpx%2Spynff.wrgcnpx%2Qpyvrag.cuc%3Se%3Qq16s7r3p%26zb%3Q23953%26sv%3Q702%23625-og

HEIC IMAGE: ERROR UPLOADING

The error notice 1 file could not be uploaded because an error occurred while uploading. appears.

I used this image for testing: https://filesamples.com/samples/image/heic/sample1.heic

https://github.com/user-attachments/assets/553495ed-7611-4365-b48a-2227352f0bf2

HEIF IMAGE: FALSE SUCCESS

It displays a success, but it doesn't transform it and a gray box is visible instead of the actual image.

I used this image for testing: https://filesamples.com/samples/image/heif/sample1.heif

https://github.com/user-attachments/assets/ee8ffb5d-a80b-4108-b0aa-d32e1728a412

WP-ADMIN: It upload both types and transform them to .jpg

https://github.com/user-attachments/assets/de14420c-9ccd-4a34-92ec-2be494b808a6

Block Editor: It works correctly using the Image Block

The heic and heif images are not allowed to select, but it works if you drag and drop. AFAIK, this limitation comes from core.

https://github.com/user-attachments/assets/5f3513c0-9cc2-4f77-941d-8cae13354223

[sejas]

I've landed D163618-code which solves the issue mentioned in the description. On atomic sites, uploading .heic and .heif files from Calypso fails with this error: "1 file could not be uploaded because an error occurred while uploading."

@jorpdesigns , can you verify that you can upload heic and heif images on atomic sites using Calypso media page?

I'll close this issue, but feel free to re-open it if necessary.

https://github.com/user-attachments/assets/ad192c5d-8c64-4e03-9daf-1ea09f80bbf4