FileReader() is unable to read large files
<p>I'm using the following approach in order to preview images before uploading them:</p>

<pre><code>$("#file").change(function() {
  var reader = new FileReader();
  reader.readAsArrayBuffer(this.files[0]);
  var fileName = this.files[0].name;
  var fileType = this.files[0].type;
  alert(fileType)
  reader.onloadend = function() {
    var base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(this.result)));
    // I show the image now and convert the data to base 64
  }
}
</code></pre>

<p>I have noticed that when the image is large, the method fails and I cannot preview the image.<br>
I am unsure if the problem is due to base64 conversion or the <code>FileReader</code>.<br>
Is there any setting to increase the max size, or is there any work around?</p>

<p>Here is the error message thrown in the console :</p>

<blockquote>
  <p>Uncaught RangeError: Maximum call stack size exceeded<br>
      at FileReader.reader.onloadend </p>
</blockquote>