title: How to detect heic image before upload in JavaScript on iOS11?
body: <p>We have an image uploading application and we compress images on client side using an external <a href="https://www.npmjs.com/package/compress.js" rel="noreferrer">JavaScript library</a> before uploading.</p>
  
  <p>Now we have came across an issue specific to iOS11 when uploading image files having the extension of <code>.heif</code> or <code>.heic</code>. </p>
  
  <p>As an example when we submit the form with <code>abc.heic</code> image, client side browser application crashes when trying to compress it through above library. So we want to restrict attaching <code>.heic</code> images to the image input.</p>
  
  <p>Unfortunately we cannot identify (I think so) <code>.heic</code> images on server side, because we receive file name as <code>abc.jpg</code>on backend since iOS11 automatically convert <code>.heic</code> images into <code>jpg</code> images before uploading. </p>
  
  <p>Therefore I want to detect it on client side, but when I check file MIME type on client side using below code, it returns <code>image/jpg</code> (actually I don't have an iPhone, so some other friend did it for me). So it looks like <code>.heic</code> image is already converted to <code>jpg</code> internally by iOS11 before I check MIME type. (But for some reason, those converted <code>jpg</code> files are not able to compress by this library)</p>
  
  <pre><code>$(document).on('change', '[id=uploading_file]', (evt) =&gt; {
      'use strict'
      const files = [...evt.target.files];
      var uploadingFile = files[0];
      var fileType = uploadingFile["type"]; // get file MIME type
      var ValidImageTypes = ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"];
  
      if (jQuery.inArray(fileType, ValidImageTypes) &gt;= 0) {
          // image compression code goes here.
      }
  });
  </code></pre>
  
  <p><strong>Some alternative solution:</strong></p>
  
  <p>I did some other alternative fix also to avoid attaching <code>.heic</code> images as below though it is not a guaranteed solution. Changed <code>accept="image/*"</code> to <code>accept="image/jpg, image/jpeg, image/png, image/gif, image/bmp"</code> , but it still shows <code>abc</code> image on file chooser.</p>