XMLHttpRequest: Support "upload" events

[kettanaito]

The upload property on the XMLHttpRequest returns a XMLHttpRequestUpload instance, which is similar to an event emitter. The consumer may use the upload instance to attach listeners on the request body upload progress.

const req = new XMLHttpRequest()
req.open('POST', '/upload')
req.upload.addEventListener('progress', (event) => {
  if (event.lengthComputable) {
    console.log('%d / %d', event.loaded, event.total)
  } 
})

We should enable the upload events for both mocked and bypassed requests.

Event order

The upload events are called in the following order, given request body:

1. loadstart, request body is known, the lengthComputable value on the ProgressEventInit is set to a boolean representing if there's any upload work to be done (request has body).
2. progress, request body is known and read, the progress event contains loaded and total of transferred request body bytes.
3. load.
4. loadend, the upload is over.

[eudinnou]

hi @kettanaito, is there any chance that this will get fixed in the near future?

[kettanaito]

Hey, @eudinnou. This task is not on my list at the moment so I don't know when I'll get to it. That being said, you and anybody else are welcome to open a pull request with the implementation for XMLHttpRequest events. I believe I've described what has to be done in the issue's description. If you feel like making this happen, let me know and I will help you during the code reviews.

[kettanaito]

Released: v0.18.0 🎉

This has been released in v0.18.0!

• 📄 Release notes
• 📦 npm package

Make sure to always update to the latest version (npm i @mswjs/interceptors@latest) to get the newest features and bug fixes.

---

Predictable release automation by @ossjs/release.

[KKrisu]

cool, but unfortunately it doesn't work with MSW itself :/

> TypeError: Class extends value undefined is not a constructor or null

> 1 | import { rest } from 'msw';

[kettanaito]

@KKrisu, MSW uses Interceptors v17 right now so this change is respectively not present there yet. It will be added with the Fetch API support later this year.

[KKrisu]

ok, we need to wait then, thank you @kettanaito

[kettanaito]

@kokiy please do not update @mswjs/interceptors manually. MSW on its latest tag relies on @mswjs/interceptors@0.17 and it should stay that way.

https://github.com/mswjs/msw/blob/2633fa93af4bcbc33f12f69a6b83193684c3dfd3/package.json#L91

What you're doing is installing the next breaking version (0.18.0). Of course, things will break, they are promised to break.

[itzfeltrin]

will MSW 1 be updated to use mswjs/interceptors@0.18 or above?

[jaredhill4]

@kettanaito,

Is this update now available in the latest version of msw? I'm needing it, also.

Looking at the package.json in msw, I see it is currently relies on 0.25.14.

https://github.com/mswjs/msw/blob/8011bdea3d12e8236db21730a3418708fbcca1e4/package.json#L119

Thank you!

[kettanaito]

@jaredhill4, yes, the latest MSW (2.0.12) already runs on the latest Interceptors. This functionality is there for Node.js. Please give it a try and let me know if you encounter any issues (remember to submit reproduction repositories if you do!).