title: Make HTML5 FileReader working with heic files
body: <p>When reading a file from the input element by the FileReader api it works, but my android device also allows sending files and it seems to send heic files anyway which then results in an empty image without any errors in the console. Also the orientation is wrong when getting an image directly from the camera. I just found heavy librarys to implement and i am looking for a smarter solution. </p>
  
  <p>JavaScript</p>
  
  <pre><code>function previewFile( e ) {
      var preview = document.getElementById('usersProfilePicture');
      var file    = e.files[0];
      var reader  = new FileReader();
  
      reader.onloadend = function () {
          preview.src = reader.result;
      }
      if (file) {
          reader.readAsDataURL(file);
      } else {
          preview.src = "";
      }
  }
  </code></pre>
  
  <p>HTML5</p>
  
  <pre><code>&lt;form&gt;
      &lt;label&gt;
          &lt;input id="uploadProfilePicture" name=file type=file accept="image/jpg, image/jpeg, image/png, image/gif, image/bmp"&gt;
      &lt;/label&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>There are no error messages at all. Firefox, Chrome both on desktop and android allow .heic files no matter what accept attribute i set.</p>
  
  <p>worst solution: deny acceptance of .heic files
  best solution: make fileReader work with .heic files.
  in between solution: detect heic and convert it to jpeg, clientside.</p>