diff --git a/README.md b/README.md index 20d7e199..3fb4ea40 100644 --- a/README.md +++ b/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' - // as well as 'GET' downloads - progress: function (progressEvent) { + // `onUploadProgress` allows handling of progress events for uploads + onUploadProgress: 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 }, diff --git a/examples/upload/index.html b/examples/upload/index.html index 9e72c1ae..0d7124b7 100644 --- a/examples/upload/index.html +++ b/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; } }; diff --git a/lib/adapters/xhr.js b/lib/adapters/xhr.js index c978b3fd..988419a9 100644 --- a/lib/adapters/xhr.js +++ b/lib/adapters/xhr.js @@ -142,14 +142,16 @@ module.exports = function xhrAdapter(config) { } // Handle progress if needed - if (typeof config.progress === 'function') { - if (config.method === 'post' || config.method === 'put') { - request.upload.addEventListener('progress', config.progress); - } else if (config.method === 'get') { - request.addEventListener('progress', config.progress); - } + if (typeof config.onDownloadProgress === 'function') { + request.addEventListener('progress', config.onDownloadProgress); } + // Not all browsers support upload events + if (typeof config.onUploadProgress === 'function' && request.upload) { + request.upload.addEventListener('progress', config.onUploadProgress); + } + + if (requestData === undefined) { requestData = null; } diff --git a/test/specs/progress.spec.js b/test/specs/progress.spec.js new file mode 100644 index 00000000..287b4dde --- /dev/null +++ b/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(); + }); + }); +});