Safari 17+: Image file got automatically converted to HEIC extension

Issue: The image file mime type got converted to HEIC by Safari

To reproduce:

  • Create an HTML file with <input type="file" accept="image/*,image/heic" />
  • Try to upload a photo with .jpeg or .png
  • Print out the file object
  • The file name would be changed to some temporary name with .heic extension

Expected:

  • The conversion should not happen after adding the image/heic to the accept mime type.
  • The accept mine type with image/heic should be allowed and cannot be removed for other modern browsers which do not support .heic. Otherwise, the system browse dialog would disable .heic type.

Other findings:

  • If image/heic is removed from the accept mime type, the file object would be printed out as its original extension.
  • It only happens with Safari 17+.

Original file object:

File: {
    lastModified: 1702417372000,
    name: "leo2.jpeg",
    size: 170584,
    type: "image/jepg",
    webkitRelativePath: ""
}

Converted file object:

File: {
    lastModified: 1702417636000,
    name: "tempImageHjyd3l.heic",
    size: 170429,
    type: "image/heic",
    webkitRelativePath: ""
}

x2

Apple, please allow to upload original photo and video files to avoid quality loss.

Futhermore, please don't alter lastModified field.

Having the same issue causing problem in a project I work on. Hoping this is a bug and not the way they are expecting it to work!

same for me, the only solution now is :

For safari, remove "image/heic" in accept attribute

But it will make Chrome not working.

So we need to detect whether it's safari and then remove "image/heic". For other browsers, "image/heic" is required even we set "image/*" in accept already.

This should be a safari bug, safari should not convert png/jpg to heic when users select an image.

Safari 17+: Image file got automatically converted to HEIC extension
 
 
Q