Why do HEIC/HEIF files show an empty file type in FileList?

Help & Support
1

Hi, I’m using a file select input to upload multiple files and have a loop to check if any of the files are in HEIC/HEIF format. When a HEIC/HEIF file is uploaded, its type property appears blank. Why is this happening? Here’s my code snippet:

const fileSelect = document.createElement("input");

fileSelect.setAttribute("type", "file");

fileSelect.setAttribute("multiple", "multiple");

fileSelect.click();

if(!this.vm.acceptedTypes.includes(file.type)) {

console.log(file);

this._$inj.globalFac.showAlert(file.name, `Error: File type ${file.type} is not supported.`);

continue;

}

Can someone tell me where iI am doing wrong?

1 Like
2

The issue you are encountering is likely due to the browser’s limited support for HEIC/HEIF file formats. Most browsers do not recognize these formats natively, resulting in a blank type property when such files are selected. The type property relies on the browser’s ability to identify the MIME type of the file, and since HEIC/HEIF formats are relatively new and not widely supported, the browser fails to assign a proper MIME type to them.

There is a workaround to identify HEIC/HEIF files if the type property is blank. Instead of relying solely on the type property, you can examine the file extension. You can extract the file extension from the name property of the file object and check if it matches ‘heic’ or ‘heif’. Here’s how you can modify your code:

fileSelect.addEventListener('change', function(e) {
  const files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    let fileExtension = file.name.split('.').pop().toLowerCase();
    
    if (fileExtension === 'heic' || fileExtension === 'heif') {
      this._$inj.globalFac.showAlert(file.name, `Error: File type ${fileExtension} is not supported.`);
      continue;
    }
    // ... rest of your code
  }
});

This approach checks the file extension directly, bypassing the issue with the type property for unsupported file formats like HEIC/HEIF.