Improve file upload progress (#1029)

* Improve file upload progress

https://developers.weixin.qq.com/miniprogram/en/dev/api/network/download/DownloadTask.onProgressUpdate.html

https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent

* Add support for wechat
* Add length of data downloaded
* Add length of total data

* improve coverage

* fix wechat lengthComputable

Author: dplewis

src/RESTController.js

@@ -167,28 +167,18 @@ const RESTController = {
       for (const key in customHeaders) {
         headers[key] = customHeaders[key];
       }
-      if(options && typeof options.progress === 'function') {
-        if (xhr.upload) {
-          xhr.upload.addEventListener('progress', (oEvent) => {
-            if (oEvent.lengthComputable) {
-              options.progress(oEvent.loaded / oEvent.total);
-            } else {
-              options.progress(null);
-            }
-          });
-        } else if (xhr.addEventListener) {
-          xhr.addEventListener('progress', (oEvent) => {
-            if (oEvent.lengthComputable) {
-              options.progress(oEvent.loaded / oEvent.total);
-            } else {
-              options.progress(null);
-            }
-          });
-        }
-      }
       xhr.onabort = () => {
         aborted = true;
       };
+      xhr.onprogress = (event) => {
+        if(options && typeof options.progress === 'function') {
+          if (event.lengthComputable) {
+            options.progress(event.loaded / event.total, event.loaded, event.total);
+          } else {
+            options.progress(null);
+          }
+        }
+      };
       xhr.open(method, url, true);
 
       for (const h in headers) {

src/Xhr.weapp.js

@@ -16,6 +16,7 @@ module.exports = class XhrWeapp {
     this.method = '';
     this.url = '';
     this.onabort = () => {};
+    this.onprogress = () => {};
     this.onerror = () => {};
     this.onreadystatechange = () => {};
     this.requestTask = null;
@@ -72,6 +73,14 @@ module.exports = class XhrWeapp {
         this.requestTask = null;
         this.onerror(err);
       }
-    })
+    });
+    this.requestTask.onProgressUpdate((res) => {
+      const event = {
+        lengthComputable: (res.totalBytesExpectedToWrite !== 0),
+        loaded: res.totalBytesWritten,
+        total: res.totalBytesExpectedToWrite,
+      };
+      this.onprogress(event);
+    });
   }
 };

src/__tests__/RESTController-test.js

@@ -429,15 +429,11 @@ describe('RESTController', () => {
   });
 
   it('reports upload progress of the AJAX request when callback is provided', (done) => {
-    const xhr = mockXHR([{ status: 200, response: { success: true }}], {
-      addEventListener: (name, callback) => {
-        if(name === "progress") {
-          callback({
-            lengthComputable: true,
-            loaded: 5,
-            total: 10
-          });
-        }
+    const xhr = mockXHR([{ status: 200, response: { success: true } }], {
+      progress: {
+        lengthComputable: true,
+        loaded: 5,
+        total: 10
       }
     });
     RESTController._setXHR(xhr);
@@ -448,7 +444,30 @@ describe('RESTController', () => {
     jest.spyOn(options, 'progress');
 
     RESTController.ajax('POST', 'files/upload.txt', {}, {}, options).then(({ response, status }) => {
-      expect(options.progress).toHaveBeenCalledWith(0.5);
+      expect(options.progress).toHaveBeenCalledWith(0.5, 5, 10);
+      expect(response).toEqual({ success: true });
+      expect(status).toBe(200);
+      done();
+    });
+  });
+
+  it('does not upload progress when total is uncomputable', (done) => {
+    const xhr = mockXHR([{ status: 200, response: { success: true } }], {
+      progress: {
+        lengthComputable: false,
+        loaded: 5,
+        total: 0
+      }
+    });
+    RESTController._setXHR(xhr);
+
+    const options = {
+      progress: function(){}
+    };
+    jest.spyOn(options, 'progress');
+
+    RESTController.ajax('POST', 'files/upload.txt', {}, {}, options).then(({ response, status }) => {
+      expect(options.progress).toHaveBeenCalledWith(null);
       expect(response).toEqual({ success: true });
       expect(status).toBe(200);
       done();

src/__tests__/test_helpers/mockXHR.js

@@ -16,7 +16,7 @@
  * alongside it.
  * `upload` can be provided to mock the XMLHttpRequest.upload property.
  */
-function mockXHR(results, upload) {
+function mockXHR(results, options = {}) {
   const XHR = function() { };
   let attempts = 0;
   XHR.prototype = {
@@ -28,8 +28,8 @@ function mockXHR(results, upload) {
       this.readyState = 4;
       attempts++;
       this.onreadystatechange();
-    },
-    upload: upload
+      this.onprogress(options.progress);
+    }
   };
   return XHR;
 }