'Safari cannot upload file w/ unknown mime type (?) (shows "tempImage")

Here's a very weird bug that occurs in Safari 15.3 and 15.4 (macOS) but not in any other browser.

If I have the following element:

<input type="file" accept=".json,.cbor">

I can select any .cbor file.

Working

However, if I do:

<input type="file" accept=".json,.jpg,.cbor">

Safari shows a 'tempImageXXXXX.jpg' name and does not select the actual file.

Broken

This only happens for .cbor files in our test, but I assume it might have something to do with unknown mime types? .wav, .json, .jpeg, .mp4, etc. all have no issues. Also no other browser has any issues with this. Re-ordering the extensions in the element neither.

To replicate: just rename a txt file to .cbor and paste the code above into jsfiddle.



Solution 1:[1]

try using this:

<input type="file" accept="application/json,image/jpg,.cbor" />

if that did not work fine, try changing .cbor with text/plain

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 M.M.F