-
Notifications
You must be signed in to change notification settings - Fork 3k
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
Fix ajax upload progress event is not set correctly #2200
Fix ajax upload progress event is not set correctly #2200
Conversation
f84f4d7
to
95b3026
Compare
95b3026
to
a2d1ff2
Compare
@@ -304,14 +303,14 @@ export class AjaxSubscriber<T> extends Subscriber<Event> { | |||
(<any>xhrTimeout).request = request; | |||
(<any>xhrTimeout).subscriber = this; | |||
(<any>xhrTimeout).progressSubscriber = progressSubscriber; | |||
if (xhr.upload && 'withCredentials' in xhr && root.XDomainRequest) { | |||
if (xhr.upload && 'withCredentials' in xhr) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is this passes browser test on IE9? Seems IE9 relies on XDomainRequest
and xdr.onprogress
as eventhandler.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't know why root.XDomainRequest
here, it caused progressSubscriber
only worked in IE9. @Blesh
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think &&
constraint is probably needed to be updated to deal each cases (if xhr
vs else if XDomainRequest
), but checking itself is still needed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've checked the specs of XDomainRequest, and I'm sure the only difference between xdr
and xhr
in handling with events is here https://github.com/Brooooooklyn/rxjs/blob/9bc37772a71ec34b2cb5aef9f3f910b1177ee58f/src/observable/dom/AjaxObservable.ts#L316
@@ -158,6 +158,14 @@ export class MockXMLHttpRequest { | |||
this.password = password; | |||
this.readyState = 1; | |||
this.triggerEvent('readyStateChange'); | |||
// https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just fyi, since ajax-helper
is mock this comment may need to be placed under AjaxObservable
implementation.
@@ -139,7 +139,7 @@ export class MockXMLHttpRequest { | |||
onerror: (e: ErrorEvent) => any; | |||
onprogress: (e: ProgressEvent) => any; | |||
ontimeout: (e: ProgressEvent) => any; | |||
upload: XMLHttpRequestUpload; | |||
upload: XMLHttpRequestUpload = Object.create(null); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what about simply do
upload = {
progress: {
get() {
return this.upload.onprogress;
}
}
}
? any strong reason to declare empty object then define property later?
(other than specifying type XMLHttpRequestUpload
. This'll be easily solvable with TS2.1 by declare as Partial<XMLHttpRequestUpload>
)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's not about Type declare... I just want mock the behavior that listeners after open called would not be fired
. So I just want remove setter
on this.upload.progress
here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see. but Object.create(null)
is required then?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
because https://github.com/Brooooooklyn/rxjs/blob/issue/ajax-upload-progress/src/observable/dom/AjaxObservable.ts#L319 would set xhr.upload.onprogress
while progressSubscriber not empty.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OOOOOh I see. sorry for that. Sorry for those.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems it'd good to leave small comments to describe reason for this for further note.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated commit
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems confusing to fill this property with an empty Object. Also, just use {}
instead of Object.create(null)
if we do decide to keep this. No reason to be fancy. It's just test code.
a2d1ff2
to
9bc3777
Compare
9bc3777
to
af6f8b9
Compare
af6f8b9
to
a7e9c3a
Compare
'responseText': JSON.stringify({}) | ||
}, 3); | ||
|
||
expect(spy).to.be.calledThrice; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LOL... is this really a thing? "Thrice"? Hahaha... How about just callCount(3)
so I don't snicker every time I read it? 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😂
Observable.ajax would set xhr.upload.onprogress when progressSubscriber is not empty. And if xhr.upload.onprogress was set after xhr.open, it would not be fired. So ajax-helper should initial an empty upload object, and freeze the setter after open method called.
a7e9c3a
to
8201e76
Compare
will this commit be landed in next version? I'm working on a fileUploader using RxJS, and I will be happy if this commit available before the end of November. |
uh..since it's already nearby x-mas it missed train already? :) If it's Dec. You mean, it depends on @Blesh but may possibly not be available due to holiday season. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Basically, I think we need to ensure our tests are mocking both available paths for upload (as I naively understand them). Both request.onprogress
and request.upload.onprogress
firing, depending on what's available, should work. Although perhaps I'm just getting myself confused here.
@@ -763,12 +814,11 @@ describe('Observable.ajax', () => { | |||
const request = MockXMLHttpRequest.mostRecent; | |||
|
|||
expect(() => { | |||
request.onprogress((<any>'onprogress')); | |||
request.upload.onprogress((<any>'onprogress')); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it seems like we should have to test both paths for this. It's tedious, but I want to make sure this works in every browser we can.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Brooooooklyn @kwonoj thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On second thought. I think this can be remedied at a later time. This is fine for now.
LGTM |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Description:
progress event should be set before
xhr.open
,see: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest