Converting a text XHR-Response to arraybuffer

Question

I'm making an XHR request. At the time of making the request, I don't know whether the URL will return an image or not, so I'm setting xhr.responseType="text"

If the response returns with a Content-Type of image/png [or any other image MIME type], I'm making another request with xhr.responseType="arraybuffer". I then use the arraybuffer that's returned to render the image:

var uInt8Array = new Uint8Array(arraybuffer);
var i = uInt8Array.length;
var binaryString = new Array(i);
while (i--) {
    binaryString[i] = String.fromCharCode(uInt8Array[i]);
}
var data = binaryString.join('');
var base64 = window.btoa(data);
//use this base64 string to render the image

Is there any way I can avoid making the second request?

I tried doing this -

var buf = new ArrayBuffer(responseText.length);
var bufView = new Uint8Array(buf);

for (var i=0, i<responseText.length; i++) {
    bufView[i] = responseText.charCodeAt(i);
}

return buf;

but the responseText isn't the same as the data in the first code sample, and the resultant ArrayBuffer doesn't render the image correctly.

Answer 1

I had the same problem with a PDF being corrupted, but the handler is generic and handles text, JSON and files.

The easiest way to solve this is to do it the other way round: Always make the request with:

xhr.responseType = "blob";

Then when you want the response as text, just convert the binary data to text:

xhr.response.text().then(text => {
    // do something
});

Having binary as the default return type I can just convert that to text where needed.