Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add blob support to passthrough #157

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add blob support to passthrough #157

wants to merge 1 commit into from

Conversation

iterion
Copy link

@iterion iterion commented May 13, 2016

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
Copy link
Author

iterion commented Jun 7, 2016

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

JordanVincent pushed a commit to JordanVincent/pretender that referenced this pull request Sep 13, 2016
@sophypal
Copy link

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.

lifecycleProps = ['readyState', 'response', 'status', 'statusText'];
xhr.responseType = fakeXHR.responseType;
}

// Use onload if the browser supports it
if ('onload' in xhr) {
if ('onload' in xhr && fakeXHR.responseType !== 'blob') {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

@stefanpenner stefanpenner Jul 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@mordrax
Copy link

mordrax commented Mar 9, 2017

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.

Copy link
Contributor

@stefanpenner stefanpenner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sorry for letting this linger.

lifecycleProps = ['readyState', 'response', 'status', 'statusText'];
xhr.responseType = fakeXHR.responseType;
}

// Use onload if the browser supports it
if ('onload' in xhr) {
if ('onload' in xhr && fakeXHR.responseType !== 'blob') {
Copy link
Contributor

@stefanpenner stefanpenner Jul 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

evts.push('load');
}

// add progress event for async calls
if (fakeXHR.async && fakeXHR.responseType !== 'arraybuffer') {
if (fakeXHR.async && fakeXHR.responseType !== 'arraybuffer' && fakeXHR.responseType !== 'blob') {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why no progress for blob?

@sukima
Copy link

sukima commented Sep 13, 2017

@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
Copy link
Contributor

@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
Copy link

sukima commented Sep 14, 2017

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
Copy link

@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
Copy link

timiyay commented Jan 8, 2019

@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
Copy link
Author

iterion commented Jan 8, 2019

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
Copy link

timiyay commented Jan 8, 2019

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

@GCheung55
Copy link

Need any help?

@timiyay
Copy link

timiyay commented Mar 18, 2019

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants