Improving User Experience with HEIC File Format Support

Photos taken on iPhone or Android may look like .jpg but actually have a file type of image/heic. Since Wanted Social only supported image/jpeg and image/png, relying solely on the extension when handling uploads caused errors.

To solve this problem, you need to check the actual type of the file. Binary files contain format information in their header, and this is where file signatures come in. For example, checking a HEIC file with the od command reveals a value like ftypheic in the header, which can be used to determine whether it is heic/heif.

On the web, you can read the file as a Uint8Array using FileReader, then convert the 4th to 12th byte range into a string and compare it against a list of HEIC signatures. In the code, ftypmif1, ftypmsf1, ftypheic, ftypheix, ftyphevc, and ftyphevx are checked to detect the HEIC format.

Since browsers often don't support HEIC/HEIF natively, a flow to convert to JPEG or PNG before upload is needed. Rather than implementing this yourself, it's more efficient to use a proven library like heic2any; in the example code, the HEIC file is converted to image/jpeg with quality: 0.8 and a new File object is created and returned.

Other platforms are already accepting this format. Jira, Confluence, and Slack support HEIC uploads, and Slack handles it by displaying what looks like a PNG on screen while delivering the original HEIC file when downloaded.

The key point is that you shouldn't judge a file solely by its extension. For upload features, you need to verify the actual file type via its signature, and include conversion when necessary, in order to naturally improve the HEIC user experience.