FileReader() is unable to read large files

Question

I'm using the following approach in order to preview images before uploading them:

$("#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
  }
}

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

Here is the error message thrown in the console :

Uncaught RangeError: Maximum call stack size exceeded
at FileReader.reader.onloadend

Answer 1

Your problem is that you use Function.apply which will convert your Typed Array items to arguments to the String.fromCharCode method.

Functions have a maximum arguments length limit.

To avoid this, when dealing with large files, the best way is to not process it at all.

If you need to send the file to your server, simply send the Blob directly, this can be easily achieved with the FormData API.

If you need to display the file i.e in HTML media element, then use URL.createObjectURL(yourFile) method.

_{And if you really need a dataURI version of the file, then use reader.readAsDataURL(yourFile) method.}

Answer 2

If you read the file using the FileReader, the whole file will be loaded into the memory. If you'd like handle large files, this will simply result in your web browser crashing right away. If you are really interested in passing your file as a Base64 String, I recommend you to add file size constraints in order to prevent any potential problems. As a conclusion, none of the methods of the FileReader class would be suitable for this purpose unless and again unless you are dealing with small files not larger than 100MG or so, otherwise you will run into problems.

Answer 3

Works for me:

var reader = new FileReader();

reader.onload = function (evt) {
    var binary = '';
    var bytes = new Uint8Array(reader.result);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    console.log(btoa(binary))
}

reader.readAsArrayBuffer(file)

Answer 4

After playing around here's the solution:

 $("#file").change(function () {
        var reader = new FileReader();
        reader.readAsBinaryString(this.files[0]);
        var fileName = this.files[0].name;
        var fileType = this.files[0].type;
        alert(fileType)
        reader.onloadend = function () { 
             var base64Image = btoa(this.result);
        }
}