title: base64 preview for photos with html img on android firefox
body: <p>I am trying to make a preview of an image file before being uploaded. It works well on desktop/firefox but not on android/firefox (the picture is empty on android). Interesting behaviour: When the chosen file is relatively small it works, otherwise it does not(don't know the exact numbers, but 1.2MB pic is working with this code on android, whereas 3.5MB photo does not work). Here is the code for getting the base64 string for display reasons(newFile is the input type=file html element):</p>
  <pre><code>newFile.onchange = () =&gt; {
      if (newFile.files &amp;&amp; newFile.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e) {
  
              //other stuff...
  
              let doc = {
                  id: -1,
                  creator: userBean.kennzeichen,
                  creationDate: dateString,
                  base64image: e.target.result    //here I store the image
              };
              let docDiv = renderDocDiv(doc);     //and pass the doc object for rendering out all the details
              newFile.insertAdjacentElement('beforebegin', docDiv);
              log('onload done');
          }
          reader.readAsDataURL(newFile.files[0]);
          log('after readURL');
      }
  };
  </code></pre>
  <p>all the log output is coming through, the image element is created but the pic remains empty on android. In renderDocDiv I do something along those lines:</p>
  <pre><code>//other stuff...
  
  let pic = document.createElement('img');
  pic.src = doc.base64image;
  container.appendChild(pic);
  return container;
  </code></pre>
  <p>It is no worky and I have no clue why...
  Any hints are highly appreciated ;)</p>