Alternative to readAsBinaryString for IE10

Question

It seems that readAsBinaryString, a method of the JavaScript FileReader object, is not supported in IE10. I've tried the following, as suggested in this HTML5 Rocks article:

String.fromCharCode.apply(null, new Uint16Array(buffer));

However, this results in an Out of stack space error.

Solution 1

I found the answer here:

var binary = "";
var bytes = new Uint8Array(buffer);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
  binary += String.fromCharCode(bytes[i]);
}

Solution 2

From the David Jones's answer, I wrote this method. The try/catch handles the readAsBinaryString exception in IE10/11 and call itself the "IE mode":

function readBinaryStringFromBlob(blob, callback, ie) {
    var reader = new FileReader();
    if(!ie) {
        reader.addEventListener("loadend", function () {
            callback(reader.result);
        });
        try {
            reader.readAsBinaryString(blob);
        } catch (err) {
            readBinaryStringFromBlob(blob, callback, true);
        }
    } else {
        reader.addEventListener("loadend", function () {
            var binary = "";
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
                binary += String.fromCharCode(bytes[i]);
            }
            callback(binary);
        });
        reader.readAsArrayBuffer(blob);
    }
}

Solution 3

If you'd like something a little terser and ES2015-ier then this may be what you're after:

  const reader = new FileReader();
  reader.onerror = e => alert("File cannot be opened");

  if (reader.readAsBinaryString) {
     reader.onload = e => alert(e.target.result));
     reader.readAsBinaryString(file);
  }
  else {
     // Catering for IE 10/11
     reader.onload = e => {
        const bytes = new Uint8Array(e.target.result);
        const binary = bytes.reduce((acc, byte) => acc + String.fromCharCode(byte), "");
        alert(binary);
     };
     reader.readAsArrayBuffer(file);
  }

Comments

[Suncat2000]

Thank you, David. I tried typing this in code and got an error, ReferenceError: UInt8Array is not defined. After a moment I realized the type is counter-intuitively named Uint8Array instead of UInt8Array - note the lower case "i". Bad developer! So sad!