Add 'progress' config option for monitoring progress events for uploa…

…ds and downloads.

README.md

@@ -49,7 +49,7 @@ axios.get('/user?ID=12345')
   .catch(function (response) {
     console.log(response);
   });
-	
+
 // Optionally the request above could also be done as
 axios.get('/user', {
     params: {
@@ -147,15 +147,15 @@ This is the available config options for making requests. Only the `url` is requ
   // The last function in the array must return a string or an ArrayBuffer
   transformRequest: [function (data) {
     // Do whatever you want to transform the data
-	
+
     return data;
   }],
 
   // `transformResponse` allows changes to the response data to be made before
   // it is passed to then/catch
   transformResponse: [function (data) {
     // Do whatever you want to transform the data
-	
+
     return data;
   }],
 
@@ -186,7 +186,13 @@ This is the available config options for making requests. Only the `url` is requ
   xsrfCookieName: 'XSRF-TOKEN', // default
 
   // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
-  xsrfHeaderName: 'X-XSRF-TOKEN' // default
+  xsrfHeaderName: 'X-XSRF-TOKEN', // default
+
+  // `progress` allows handling of progress events for 'POST' and 'PUT uploads'
+  // as well as 'GET' downloads
+  progress: function(progressEvent) {
+    // Do whatever you want with the native progress event
+  }
 }
 ```
 
@@ -201,7 +207,7 @@ The response for a request contains the following information.
 
   // `status` is the HTTP status code from the server response
   status: 200,
-  
+
   // `statusText` is the HTTP status message from the server response
   statusText: 'OK',
 

examples/upload/index.html

@@ -26,7 +26,13 @@ <h1>file upload</h1>
           data.append('foo', 'bar');
           data.append('file', document.getElementById('file').files[0]);
 
-          axios.put('/upload/server', data)
+          var config = {
+            progress: function(progressEvent) {
+              var percentCompleted = progressEvent.loaded / progressEvent.total;
+            }
+          };
+
+          axios.put('/upload/server', data, config)
             .then(function (res) {
               output.className = 'container';
               output.innerHTML = res.data;
@@ -40,4 +46,3 @@ <h1>file upload</h1>
     </script>
   </body>
 </html>
-

lib/adapters/xhr.js

@@ -11,6 +11,7 @@ var transformData = require('./../helpers/transformData');
 var urlIsSameOrigin = require('./../helpers/urlIsSameOrigin');
 
 module.exports = function xhrAdapter(resolve, reject, config) {
+
   // Transform request data
   var data = transformData(
     config.data,
@@ -100,6 +101,15 @@ module.exports = function xhrAdapter(resolve, reject, config) {
     }
   }
 
+  // Handle progress if needed
+  if (config.progress) {
+    if (config.method === 'post' || config.method === 'put') {
+      request.upload.addEventListener('progress', config.progress);
+    } else if (config.method === 'get') {
+      request.addEventListener('progress', config.progress);
+    }
+  }
+
   if (utils.isArrayBuffer(data)) {
     data = new DataView(data);
   }