Add blob support to passthrough

[iterion]

We're using blobs for file downloads and these modifications got those XHR requests working through pretender's passthrough.

It's mostly the same as what was done for arraybuffer. The main other issue I experienced was that the onload event was fired twice. By skipping it in pretender the issue was avoided.

[iterion]

I'd love to see this merged, are there any changes that need to be made to get this in?

[sophypal]

I'd love to see this go in as well. I'm stuck always disabling Pretender in my dev environment for projects that do more than just fetch JSON.

[sophypal]

Curious, why wouldn't we want the onload event to be called for responseType === 'blob'?

[iterion]

We were seeing odd behavior in some of our tests where the message was delivered twice. However, this could have been a symptom of something else as I was never able to determine the root cause.

[stefanpenner]

i would think its an unrelated to system, if so can we remove this? Then we can move forward with merging + releasing this.

[mordrax]

Sunk a day debugging our framework, another 3rd party lib, mirage, pretender to finally realise the blob was not being passed through and nothing related to xhr response levels.

Made worse by other google results showing this.pretender.get('/*passthrough', this.pretender.passthrough) as a solution.

We're using this for our acceptance testing suite where we need to fetch alot of media as blobs.

Would like to see this merged at some point.

[stefanpenner]

left some comments, once addressed i'll merge + release.

Sorry for letting this linger.

[stefanpenner]

i would think its an unrelated to system, if so can we remove this? Then we can move forward with merging + releasing this.

[stefanpenner]

why no progress for blob?

[sukima]

@iterion Please fix this! it is now four months old! Please! ember-mirage will not work in ourt app without this. Please?! Pretty pretty please?

[stefanpenner]

@sukima there are outstanding comments, once those are addressed we can move forward. If this is urgent for you, maybe you can lend the original submitter some help.

[sukima]

I would love too. I just don't know the sub system well enough to be able to answer your questions. However, for those who find this via Google and the like I found the following workaround.

In my example I needed to construct a data URI for a third partly lib. Originally it used the xhr.responseType = 'blob' Which when attempted to handle in testing would result in a missing xhr.response from Pretender. Noting that Pretender supports xhr.responseType = 'arraybuffer' I used that and then used the JS stdlib Blob object to create a blob from an arraybuffer suitable for FileReader. Here is the code that finds the best of both worlds (production and testing):

function convertXhrResponseToDataUri(xhr) {
  return new Promise(resolve => {
    let type = xhr.getResponseHeader('Content-Type') || 'application/octet-stream';
    let blob = new Blob([xhr.response], {type}); // xhr.response is an ArrayBuffer
    let reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

function fetchAsDataUri(url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'arraybuffer'; // Here is the trick
    xhr.onload = () => {
      let status = parseInt(xhr.status, 10);
      if (status >= 200 && status < 300 || status === 304) {
        resolve(convertXhrResponseToDataUri(xhr));
      } else {
        reject(new Error(`Server Response: ${status} ${xhr.statusText}`));
      }
    };
    xhr.onerror = () => reject(new Error('Network Failure'));
    xhr.open('GET', url);
    xhr.send();
  });
}

[allthesignals]

@sukima I think I have a very similar issue. I'm attempting to intercept a request to a protobuf file that comes through as an arraybuffer, and simply return a "real" in-memory array buffer. FakeXMLHTTPRequest, however, only seems to get a blank string - there is no .response (hence this PR).

Right now, I'm monkey-patching things for pretender. How are you using these two functions?

[timiyay]

@iterion Do you have any bandwidth to pick up this old issue?

I'm working on moving away from a custom forks of pretender, and this is one of the blockers. If you needed help to get it over the line, ping me here and I can request some time to help you out.

[iterion]

Sorry, my job has changed since I created this PR and I no longer use pretender. I'll try to devote some time to it, but it's unlikely to happen any time soon. In the meantime, please feel free to reuse the code in this PR to create a new one that addresses @stefanpenner's review.

[timiyay]

No worries, thanks for replying @iterion. I'll look at the work involved, and request some time to work on a new PR.

[GCheung55]

Need any help?

[timiyay]

@GCheung55 sure, that'd be great.

I've been on leave for a bit, and catching up on project work. so it's unlikely I'll get time to work on this in the near future.

[artemgurzhii]

@sukima Current workaround we use in our app is this.pretender.get('blob:**', this.pretender.passthrough), hope this will work for you.