Bug 303803 – PNG converted to HEIC on file upload seemingly not accepted by image/* wildcard

• Status: RESOLVED
• Resolution: FIXED
• Component: Images

[janbrasna]

Since Safari 17, uploaded <input type="file" accept="image/*,image/heic"> converts PNGs or JPGs to HEIC first before uploading, even though the image/* should be enough for that media types to be accepted without conversion. Explicitly adding HEIC to that list (for historical reasons) does not mean it's the only or preferred format accepted, but Safari starts converting every other image type to it in such forms.

MRE: https://jsfiddle.net/us1hdpzr/

Simply adding an explicit PNG mime type allows PNGs unconverted: https://jsfiddle.net/gk0b74uc/
(NB: This example still converts JPEGs or GIFs before uploading, for demonstration. This time to PNGs, as that's the first fully enumerated accept type in the list, so the tempImageNnNNnN.png from other formats is coerced into PNG in this instance.)

For support it doesn't matter if the PNG is first in the order or not, it can be added well after the HEIC or after the wildcard: https://jsfiddle.net/8spartde/ — what matters in the order however, is what's the first non-wildcard accept type, to which the other ones get converted. Demonstrated by this order: https://jsfiddle.net/q3op1u6c/ which converts GIFs to JPEGs, being the first in the list.

So the issue is not actually HEIC/HEIF specific per se, as just specifying a wildcard, and a full mime type like this: https://jsfiddle.net/hLxpmt2b/ also reproduces this problem, here coercing everything from GIF to HEIC to a PNG beforehand.

It just seems related to the logic added some time ago to convert HEIC/HEIF files for compatibility reasons to other image formats. But the logic seems ending up too greedy, and doing conversions even in unexpected directions since then?

[janbrasna]

Some previous work in that field:
- Bug 213347
- Bug 292041
- Bug 219783

Other reports:
- https://developer.apple.com/forums/thread/743049
- https://core.trac.wordpress.org/ticket/62447
   (explicitly adding the mime due to https://issues.chromium.org/issues/375118901 …)

[Karl Dubost]

Different test cases:
The script part is the same in all cases. 

<input type="file" multiple
  accept="CONTENT_TYPE_VALUE"
  id="file">
<p id="result"></p>
<script>
document.getElementById("file").addEventListener("change", (ev) => {
  document.getElementById("result").innerHTML = [...ev.target.files]
    .map((file) => file.name)
    .join("<br />")
})
</script>

Select A PNG as input


# test case A: https://jsfiddle.net/us1hdpzr/
accept="image/*, image/heic"

# test case B: https://jsfiddle.net/gk0b74uc/
accept="image/png, image/*, image/heic"

# test case C: https://jsfiddle.net/8spartde/
accept="image/heic, image/png, image/*"

# test case D: https://jsfiddle.net/q3op1u6c/
accept="image/jpeg, image/png, image/*, image/heic"

# test case E: https://jsfiddle.net/hLxpmt2b/
accept="image/png, image/*"

I'm adding a test case F

# test case F: 
accept="image/*"




on macOS 26.2

Safari - PNG 
===========
A: tempImagebLRNyk.heic
B: webcompat.png
C: webcompat.png
D: webcompat.png
E: webcompat.png
F: webcompat.png


Firefox - PNG 
=======
A: webcompat.png
B: webcompat.png
C: webcompat.png
D: webcompat.png
E: webcompat.png
F: webcompat.png

Chrome - PNG 
=======
A: webcompat.png
B: webcompat.png
C: webcompat.png
D: webcompat.png
E: webcompat.png
F: webcompat.png


Tested with 
Safari Technology Preview  233          21624.1.3
Firefox Nightly            147.0a1       14725.12.3
Google Chrome Canary       145.0.7569.0  7569.0

[Karl Dubost]

Need to dive in the code 
https://searchfox.org/wubkat/rev/904d209b92e989c17e5133a96c75eb75d2941d5a/Source/WebKit/UIProcess/WebPageProxy.cpp#11010-11055

[Karl Dubost]

Oh no the bug is here. 

https://searchfox.org/wubkat/rev/904d209b92e989c17e5133a96c75eb75d2941d5a/Source/WebCore/platform/graphics/cg/ImageUtilitiesCG.cpp#100-114

```
        if (!allowedMIMETypes.contains(WebCore::MIMETypeRegistry::mimeTypeForPath(path))) {
            needsTranscoding = true;
            return path;
        }
```

["image/*", "image/heic"].contains("image/png"), it will add it to the list of files which needs to be transcoded.

[Karl Dubost]

"image/*" is treated as a literal string, not a wildcard.

[Radar WebKit Bug Importer]

<rdar://problem/166124206>

[Karl Dubost]

Pull request: https://github.com/WebKit/WebKit/pull/55090

[EWS]

Committed 305283@main (4a46daaf002f): <https://commits.webkit.org/305283@main>

Reviewed commits have been landed. Closing PR #55090 and removing active labels.