Splitting progress event handlers into upload and download handlers

README.md

@@ -270,9 +270,13 @@ These are the available config options for making requests. Only the `url` is re
   // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
   xsrfHeaderName: 'X-XSRF-TOKEN', // default
 
-  // `progress` allows handling of progress events for 'POST' and 'PUT uploads'
+  // `onUploadProgress` allows handling of progress events for uploads
-  // as well as 'GET' downloads
+  onUploadProgress: function (progressEvent) {
-  progress: function (progressEvent) {
+    // Do whatever you want with the native progress event
+  },
+
+  // `onDownloadProgress` allows handling of progress events for downloads
+  onDownloadProgress: function (progressEvent) {
     // Do whatever you want with the native progress event
   },
 

examples/upload/index.html

@@ -27,7 +27,7 @@
           data.append('file', document.getElementById('file').files[0]);
 
           var config = {
-            progress: function(progressEvent) {
+            onUploadProgress: function(progressEvent) {
               var percentCompleted = progressEvent.loaded / progressEvent.total;
             }
           };

lib/adapters/xhr.js

@@ -142,14 +142,16 @@ module.exports = function xhrAdapter(config) {
     }
 
     // Handle progress if needed
-    if (typeof config.progress === 'function') {
+    if (typeof config.onDownloadProgress === 'function') {
-      if (config.method === 'post' || config.method === 'put') {
+      request.addEventListener('progress', config.onDownloadProgress);
-        request.upload.addEventListener('progress', config.progress);
-      } else if (config.method === 'get') {
-        request.addEventListener('progress', config.progress);
-      }
     }
 
+    // Not all browsers support upload events
+    if (typeof config.onUploadProgress === 'function' && request.upload) {
+      request.upload.addEventListener('progress', config.onUploadProgress);
+    }
+
+
     if (requestData === undefined) {
       requestData = null;
     }

test/specs/progress.spec.js

@@ -0,0 +1,111 @@
+describe('progress events', function () {
+  beforeEach(function () {
+    jasmine.Ajax.install();
+  });
+
+  afterEach(function () {
+    jasmine.Ajax.uninstall();
+  });
+
+  it('should add a download progress handler', function (done) {
+    var progressSpy = jasmine.createSpy('progress');
+
+    axios('/foo', { onDownloadProgress: progressSpy } );
+
+    getAjaxRequest().then(function (request) {
+      request.respondWith({
+        status: 200,
+        responseText: '{"foo": "bar"}'
+      });
+      expect(progressSpy).toHaveBeenCalled();
+      done();
+    });
+  });
+
+  it('should add a upload progress handler', function (done) {
+    var progressSpy = jasmine.createSpy('progress');
+
+    axios('/foo', { onUploadProgress: progressSpy } );
+
+    getAjaxRequest().then(function (request) {
+      // Jasmine AJAX doesn't trigger upload events. Waiting for upstream fix
+      // expect(progressSpy).toHaveBeenCalled();
+      done();
+    });
+  });
+
+  it('should add both upload and download progress handlers', function (done) {
+    var downloadProgressSpy = jasmine.createSpy('downloadProgress');
+    var uploadProgressSpy = jasmine.createSpy('uploadProgress');
+
+    axios('/foo', { onDownloadProgress: downloadProgressSpy, onUploadProgress: uploadProgressSpy });
+
+    getAjaxRequest().then(function (request) {
+      // expect(uploadProgressSpy).toHaveBeenCalled();
+      expect(downloadProgressSpy).not.toHaveBeenCalled();
+      request.respondWith({
+        status: 200,
+        responseText: '{"foo": "bar"}'
+      });
+      expect(downloadProgressSpy).toHaveBeenCalled();
+      done();
+    });
+  });
+
+  it('should add a download progress handler from instance config', function (done) {
+    var progressSpy = jasmine.createSpy('progress');
+
+    var instance = axios.create({
+      onDownloadProgress: progressSpy,
+    });
+
+    instance.get('/foo');
+
+    getAjaxRequest().then(function (request) {
+      request.respondWith({
+        status: 200,
+        responseText: '{"foo": "bar"}'
+      });
+      expect(progressSpy).toHaveBeenCalled();
+      done();
+    });
+  });
+
+  it('should add a upload progress handler from instance config', function (done) {
+    var progressSpy = jasmine.createSpy('progress');
+
+    var instance = axios.create({
+      onUploadProgress: progressSpy,
+    });
+
+    instance.get('/foo');
+
+    getAjaxRequest().then(function (request) {
+      // expect(progressSpy).toHaveBeenCalled();
+      done();
+    });
+  });
+
+  it('should add upload and download progress handlers from instance config', function (done) {
+    var downloadProgressSpy = jasmine.createSpy('downloadProgress');
+    var uploadProgressSpy = jasmine.createSpy('uploadProgress');
+
+    var instance = axios.create({
+      onDownloadProgress: downloadProgressSpy,
+      onUploadProgress: uploadProgressSpy,
+    });
+
+    instance.get('/foo');
+
+    getAjaxRequest().then(function (request) {
+      // expect(uploadProgressSpy).toHaveBeenCalled();
+      expect(downloadProgressSpy).not.toHaveBeenCalled();
+      request.respondWith({
+        status: 200,
+        responseText: '{"foo": "bar"}'
+      });
+      expect(downloadProgressSpy).toHaveBeenCalled();
+      done();
+    });
+  });
+});