Progress event handling

README.md

@@ -133,6 +133,21 @@ reqwest({
   })
 ```
 
+``` js
+reqwest({
+    url: 'path/to/upload/large/file'
+  , method: 'POST'
+  , data: { image: 'somelargebase64encoding' }
+})
+  .progress(function(evt, progressPercent){
+    console.log("Uploaded at " + (progressPercent*100) + "%" )
+  })
+  .then(function(){
+    console.log("Upload completed")
+  })
+```
+
+
 ``` js
 var r = reqwest({
     url: 'path/to/data.jsonp?foo=bar'
@@ -152,6 +167,7 @@ var r = reqwest({
 })
 ```
 
+
 ## Options
 
   * `url` a fully qualified uri
@@ -165,6 +181,7 @@ var r = reqwest({
   * `error` A function called when the request fails.
   * `complete` A function called whether the request is a success or failure. Always called when complete.
   * `jsonpCallback` Specify the callback function name for a `JSONP` request. This value will be used instead of the random (but recommended) name automatically generated by reqwest.
+  * `progress` A function called during upload, to handle the progression of the request.
 
 ## Security
 

src/reqwest.js

@@ -1,3 +1,4 @@
+
 !function (name, context, definition) {
   if (typeof module != 'undefined' && module.exports) module.exports = definition()
   else if (typeof define == 'function' && define.amd) define(definition)
@@ -19,6 +20,7 @@
     }
   }
 
+
   var httpsRe = /^http/
     , protocolRe = /(^\w+):\/\//
     , twoHundo = /^(20\d|1223)$/ //http://stackoverflow.com/questions/10046972/msie-returns-status-code-of-1223-for-ajax-request
@@ -59,10 +61,12 @@
             return xhr
           } else if (context[xDomainRequest]) {
             var protocolRegExp = /^https?/;
+
             if (window.location.href.match(protocolRegExp)[0] !== o.url.match(protocolRegExp)[0]) {
               throw new Error('XDomainRequest: requests must be targeted to the same scheme as the hosting page.')
-              // As per: http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx
+              // As per: http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx   
             }
+
             return new XDomainRequest()
           } else {
             throw new Error('Browser does not support cross-origin requests')
@@ -192,7 +196,7 @@
     }
   }
 
-  function getRequest(fn, err) {
+  function getRequest(fn, err, progress) {
     var o = this.o
       , method = (o['method'] || 'GET').toUpperCase()
       , url = typeof o === 'string' ? o : o['url']
@@ -224,10 +228,12 @@
         http.onerror = err
         // NOTE: see
         // http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/30ef3add-767c-4436-b8a9-f1ca19b4812e
-        http.onprogress = function() {}
+        http.onprogress = (progress || function(){})
         sendWait = true
     } else {
       http.onreadystatechange = handleReadyState(this, fn, err)
+
+      http.upload && (http.upload.onprogress = progress)
     }
     o['before'] && o['before'](http)
     if (sendWait) {
@@ -267,6 +273,8 @@
     // success handlers
     this._successHandler = function(){}
     this._fulfillmentHandlers = []
+    // progress handlers
+    this._progressHandlers = []
     // error handlers
     this._errorHandlers = []
     // complete (both success and fail) handlers
@@ -302,6 +310,13 @@
       })
     }
 
+    if (o['progress']) {
+      this._progressHandlers.push(function () {
+        o['progress'].apply(o, arguments)
+      })
+    }
+
+
     function complete (resp) {
       o['timeout'] && clearTimeout(self.timeout)
       self.timeout = null
@@ -375,7 +390,24 @@
       complete(resp)
     }
 
-    this.request = getRequest.call(this, success, error)
+    function progress(evt) {
+      var percentCompleted;
+
+      if (evt.lengthComputable) {
+        percentCompleted = evt.loaded / evt.total;
+
+      } else {
+        //Length is not computable, we trigger the event with percentCompleted==0
+        percentCompleted = 0;
+      }
+
+
+      for(var i = 0; i < self._progressHandlers.length; i++) {
+        self._progressHandlers[i](evt, percentCompleted);
+      }
+    }
+
+    this.request = getRequest.call(this, success, error, progress)
   }
 
   Reqwest.prototype = {
@@ -436,6 +468,10 @@
   , 'catch': function (fn) {
       return this.fail(fn)
     }
+  , progress: function(fn) {
+      this._progressHandlers.push(fn)
+      return this;
+    }
   }
 
   function reqwest(o, fn) {
@@ -625,4 +661,4 @@
   }
 
   return reqwest
-});
+});