From 1cbc4bf95f69d8e018d0d4900861a766e192005e Mon Sep 17 00:00:00 2001 From: Charles Samborski Date: Wed, 22 Jul 2015 09:52:03 +0200 Subject: [PATCH 1/6] Notifications for xhr.upload.onprogress Triggers deferred.notify during upload progress if the config option `watchUpload` is set to true. Adds the property `upload = true` to the upload progress event to easily detect the type of progress event (download or upload). --- q-xhr.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/q-xhr.js b/q-xhr.js index 73f7f2a..737c722 100644 --- a/q-xhr.js +++ b/q-xhr.js @@ -189,6 +189,10 @@ config.withCredentials = defaults.withCredentials } + if (config.watchUpload == null && defaults.watchUpload != null) { + config.watchUpload = defaults.watchUpload + } + // send request return sendReq(config, reqData, headers).then(transformResponse, transformResponse) }, @@ -300,6 +304,13 @@ deferred.notify(progress) } + if(config.watchUpload && xhr.upload) { + xhr.upload.onprogress = function (progress) { + progress.upload = true; // flag to differentiate from xhr.onprogress + deferred.notify(progress) + } + } + if (config.withCredentials) { xhr.withCredentials = true } From 15722978a60ed7c3af59760a68b0515118a142d0 Mon Sep 17 00:00:00 2001 From: Demurgos Date: Thu, 23 Jul 2015 16:01:19 +0200 Subject: [PATCH 2/6] Listen to xhr.upload.onprogress --- README.md | 25 ++++++++++++++++++++++++- q-xhr.js | 8 ++++++++ test/unit.tests.coffee | 21 ++++++++++++++++++--- 3 files changed, 50 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index eeaf6a3..839e29f 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,29 @@ Post some JSON: console.log('success!') }, function(resp) { console.log('request failed with status' + resp.status) + }, function(progress) { + if (progress.upload) { + console.log('Uploaded: '+progress.loaded+' bytes') + } else { + console.log('Downloaded: '+progress.loaded+' bytes') + } + }) +``` + +Listen to progress: + +```javascript + + var someLargeData = getSomeLargeData(); + + Q.xhr.post('/processLargeData', someLargeData).progress(function(progress) { + if (progress.upload) { + console.log('Uploaded: '+progress.loaded+' bytes') + } else { + console.log('Downloaded: '+progress.loaded+' bytes') + } + }).then(function(resp) { + console.log('success!') }) ``` @@ -42,7 +65,7 @@ On the topic of MVC frameworks not needing jQuery, The [Angular] devs have adopt - **No JSONP.** JSONP has all sorts of security flaws and limitations and causes lots of burden on both client side and server side code. Given that [XDomainRequest is available for IE8 and 9](http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx), and IE6 and 7 [are dead](http://gs.statcounter.com/#desktop-browser_version_partially_combined-ww-monthly-201302-201402), it should be avoided IMO. If you want XDomainRequest support (which jQuery never did), let me know or submit a pull request! - **Interceptors are applied in order.** I guess [angular] had some backward compatibility they were tied to do so something funky by applying request handlers in reverse but response handlers in order, but I don't have backward compatibility issues so it works like you'd expect. - **The default JSON transform is only applied if the response content is `application/json`**. [Angular] was doing something odd by sniffing all content via regex matching and then converting it to JSON if it matched. Why? Geez people set your `Content-Type` correctly already. Not to mention content sniffing leads to [security issues](http://blogs.msdn.com/b/ie/archive/2008/09/02/ie8-security-part-vi-beta-2-update.aspx). -- **Progress support**. Supply a progress listener function to recieve [ProgressEvent](https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent)s. +- **Progress support**. Supply a progress listener function to recieve [ProgressEvent](https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent)s. q-xhr listens to both upload and download progress. To help you detect the type of progress, q-xhr adds the boolean property `upload` to the `ProgressEvent` object. ### Installation diff --git a/q-xhr.js b/q-xhr.js index 73f7f2a..616d172 100644 --- a/q-xhr.js +++ b/q-xhr.js @@ -297,9 +297,17 @@ } xhr.onprogress = function (progress) { + progress.upload = false deferred.notify(progress) } + if (xhr.upload) { + xhr.upload.onprogress = function (progress) { + progress.upload = true + deferred.notify(progress) + } + } + if (config.withCredentials) { xhr.withCredentials = true } diff --git a/test/unit.tests.coffee b/test/unit.tests.coffee index e8e75f7..269ee68 100644 --- a/test/unit.tests.coffee +++ b/test/unit.tests.coffee @@ -89,16 +89,31 @@ describe 'q-xhr', -> inFlight: -> xhr.withCredentials.should.be.true - it 'should send progress notifications', (done) -> + it 'should send progress notifications during upload', (done) -> Q.xhr( url: '/foo' ).progress (prog) -> - prog.should.equal 'progress!' + prog.upload.should.equal true + prog.should.equal 'upload progress!' done() scenario inFlight: -> - xhr.onprogress('progress!') + xhr.upload.onprogress('upload progress!') + return + + + it 'should send progress notifications during download', (done) -> + Q.xhr( + url: '/foo' + ).progress (prog) -> + prog.upload.should.equal false + prog.should.equal 'download progress!' + done() + + scenario + inFlight: -> + xhr.onprogress('download progress!') return describe 'params', -> From 9f9a23fe595274d1927e0224dfff282c00dc5ca3 Mon Sep 17 00:00:00 2001 From: Demurgos Date: Thu, 23 Jul 2015 16:03:53 +0200 Subject: [PATCH 3/6] Bump to 1.0.0 --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index b4a790c..f6a5f1b 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "q-xhr", "main": "q-xhr.js", - "version": "0.1.3", + "version": "1.0.0", "homepage": "https://github.com/nathanboktae/q-xhr", "authors": [ "Nathan Black " diff --git a/package.json b/package.json index d607959..6cc148d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "q-xhr", - "version": "0.1.3", + "version": "1.0.0", "description": "XMLHttpRequest (ajax) using powerful Q promises", "author": "Nathan Black ", "main": "q-xhr.js", From 6b2556fd54e4c995484d9e99c9b7f75e2d4b0dd5 Mon Sep 17 00:00:00 2001 From: Demurgos Date: Thu, 23 Jul 2015 16:08:26 +0200 Subject: [PATCH 4/6] Feature detection for upload progress test --- test/unit.tests.coffee | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/unit.tests.coffee b/test/unit.tests.coffee index 269ee68..7dc3947 100644 --- a/test/unit.tests.coffee +++ b/test/unit.tests.coffee @@ -90,6 +90,10 @@ describe 'q-xhr', -> xhr.withCredentials.should.be.true it 'should send progress notifications during upload', (done) -> + if !window.XMLHttpRequestUpload + done() + return + Q.xhr( url: '/foo' ).progress (prog) -> From 7f4ac6ed34dfba93824c59672c32d37e194d4dbc Mon Sep 17 00:00:00 2001 From: Demurgos Date: Thu, 23 Jul 2015 16:14:57 +0200 Subject: [PATCH 5/6] Fixed redundancy in demo --- README.md | 6 ------ q-xhr.js | 4 ++++ 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 839e29f..bd1313f 100644 --- a/README.md +++ b/README.md @@ -29,12 +29,6 @@ Post some JSON: console.log('success!') }, function(resp) { console.log('request failed with status' + resp.status) - }, function(progress) { - if (progress.upload) { - console.log('Uploaded: '+progress.loaded+' bytes') - } else { - console.log('Downloaded: '+progress.loaded+' bytes') - } }) ``` diff --git a/q-xhr.js b/q-xhr.js index 616d172..053bd2d 100644 --- a/q-xhr.js +++ b/q-xhr.js @@ -189,6 +189,10 @@ config.withCredentials = defaults.withCredentials } + if (config.watchUpload == null && defaults.watchUpload != null) { + config.watchUpload = defaults.watchUpload + } + // send request return sendReq(config, reqData, headers).then(transformResponse, transformResponse) }, From 7f0a6274a6a71ba05240ec428627a304ec572f32 Mon Sep 17 00:00:00 2001 From: Charles Samborski Date: Thu, 23 Jul 2015 16:21:14 +0200 Subject: [PATCH 6/6] Removed merge artifact --- q-xhr.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/q-xhr.js b/q-xhr.js index 053bd2d..616d172 100644 --- a/q-xhr.js +++ b/q-xhr.js @@ -189,10 +189,6 @@ config.withCredentials = defaults.withCredentials } - if (config.watchUpload == null && defaults.watchUpload != null) { - config.watchUpload = defaults.watchUpload - } - // send request return sendReq(config, reqData, headers).then(transformResponse, transformResponse) },