4

For background I have been trying to make a XMLHttpRequest to a webservice to get a blob and then eventually read the same. The call seems to be going through, the chrome network logs shows the call was success and the service did respond with binary data.

But somehow when I am trying to read file using FileReader its giving me error:

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

This essentially means its not giving me the required response type, probably converting the blob into some kind of object.

({
    testXHR: function(component, event, helper) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://httpbin.org/get');

        xhr.responseType = 'blob'
        xhr.onload = function() {
            var fr = new FileReader();
            fr.onload = function(e) {
                window.open(e.target.result, '_blank');
                return e.target.result;
            }
            fr.readAsDataURL(xhr.response);
        }
        xhr.send();
    }

})

Here are some observations

  1. Made the same call using a VF page and seems like its working as expected
  2. When trying from lightning component the chrome network tab does report the call was successfully and the service did respond with blob.
  3. CSP is already set for the webservice
  4. Cannot route the call via the apex controller , because of the size of response, which can be more than 6mb.

Not sure how to proceed on this. When putting some console.log statements in to log the response in lightning looks something like this:

enter image description here

where as in visualforce page it seems to be returning a proper blob object

console log

I am not sure how to convert the lightning response to a proper blob object show that it can be read by FileReader. Any suggestions will be really helpful.

1

I'm guessing that Lightning page hijacked the XMLHttpRequest to optimize communications (but I don't know that for a fact)

If you're able to change the service's response you could change it to respond with a string representation of the blob (return base64 instead of blob). For example, a VisualForce Remoting method would return a type String and end with something like this:

@RemoteAction
public static String getBlobAsBase64() {
  Blob myBlob = getMyBlob();
  return EncodingUtil.base64Encode(myBlob);
}

On the other hand, if you're service is simply returning binary data you could try using jQuery BinaryTransport plugin for jQuery (I am currently using this plugin and it works on my VisualForce pages, haven't test on lightning though). This method would look something like this:

var jqXHR = $.ajax({url: '/something.pdf', dataType: 'binary'});
jqXHR.done(function( data, textStatus, jqXHR ) {
  var reader  = new FileReader();
  reader.onload = function(e){
    window.open(e.target.result, '_blank');
    return e.target.result;
  };
});
| improve this answer | |
  • Well proxying through apex wouldn't be possible because the response sizes can go more than 6mb. I need to give the Jquery plugin a shot, but I fear it might be also using xhr in the backend, which might be hit by the same issue. – Avidev9 Apr 20 '17 at 7:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.