Support Parse.File getData cancel (#951)

* Support Parse.File getData cancel

Allow to cancel downloading file data or uploading via uri (uri is first downloaded to base64 then uploaded to the server)

* clean up

* Documentation

* Update Xhr.weapp.js

* Fix tests

* remove fit

Author: dplewis

integration/test/ParseFileTest.js

@@ -39,6 +39,16 @@ describe('Parse.File', () => {
     assert.equal(file2.url(), result.get('file2').url());
   });
 
+  it('can cancel save file with uri', async () => {
+    const parseLogo = 'https://raw.githubusercontent.com/parse-community/parse-server/master/.github/parse-server-logo.png';
+    const file = new Parse.File('parse-server-logo', { uri: parseLogo });
+    file.save().then(() => {
+      assert.equal(file.name(), undefined);
+      assert.equal(file.url(), undefined);
+    });
+    file.cancel();
+  });
+
   it('can not get data from unsaved file', async () => {
     const file = new Parse.File('parse-server-logo', [61, 170, 236, 120]);
     file._data = null;

src/ParseFile.js

@@ -166,8 +166,11 @@ class ParseFile {
     if (!this._url) {
       throw new Error('Cannot retrieve data for unsaved ParseFile.');
     }
+    const options = {
+      requestTask: (task) => this._requestTask = task,
+    };
     const controller = CoreManager.getFileController();
-    const result = await controller.download(this._url);
+    const result = await controller.download(this._url, options);
     this._data = result.base64;
     return this._data;
   }
@@ -224,13 +227,17 @@ class ParseFile {
           return this;
         });
       } else if (this._source.format === 'uri') {
-        this._previousSave = controller.download(this._source.uri).then((result) => {
+        this._previousSave = controller.download(this._source.uri, options).then((result) => {
+          if (!(result && result.base64)) {
+            return {};
+          }
           const newSource = {
             format: 'base64',
             base64: result.base64,
             type: result.contentType,
           };
           this._data = result.base64;
+          this._requestTask = null;
           return controller.saveBase64(this._name, newSource, options);
         }).then((res) => {
           this._name = res.name;
@@ -252,6 +259,9 @@ class ParseFile {
     }
   }
 
+  /**
+   * Aborts the request if it has already been sent.
+   */
   cancel() {
     if (this._requestTask && typeof this._requestTask.abort === 'function') {
       this._requestTask.abort();
@@ -348,15 +358,15 @@ const DefaultController = {
     return CoreManager.getRESTController().request('POST', path, data, options);
   },
 
-  download: function(uri) {
+  download: function(uri, options) {
     if (XHR) {
-      return this.downloadAjax(uri);
+      return this.downloadAjax(uri, options);
     } else if (process.env.PARSE_BUILD === 'node') {
       return new Promise((resolve, reject) => {
         const client = uri.indexOf('https') === 0
           ? require('https')
           : require('http');
-        client.get(uri, (resp) => {
+        const req = client.get(uri, (resp) => {
           resp.setEncoding('base64');
           let base64 = '';
           resp.on('data', (data) => base64 += data);
@@ -366,29 +376,38 @@ const DefaultController = {
               contentType: resp.headers['content-type'],
             });
           });
-        }).on('error', reject);
+        });
+        req.on('abort', () => {
+          resolve({});
+        });
+        req.on('error', reject);
+        options.requestTask(req);
       });
     } else {
       return Promise.reject('Cannot make a request: No definition of XMLHttpRequest was found.');
     }
   },
 
-  downloadAjax: function(uri) {
+  downloadAjax: function(uri, options) {
     return new Promise((resolve, reject) => {
       const xhr = new XHR();
       xhr.open('GET', uri, true);
       xhr.responseType = 'arraybuffer';
       xhr.onerror = function(e) { reject(e); };
       xhr.onreadystatechange = function() {
-        if (xhr.readyState !== 4) {
+        if (xhr.readyState !== xhr.DONE) {
           return;
         }
+        if (!this.response) {
+          return resolve({});
+        }
         const bytes = new Uint8Array(this.response);
         resolve({
           base64: ParseFile.encodeBase64(bytes),
           contentType: xhr.getResponseHeader('content-type'),
         });
       };
+      options.requestTask(xhr);
       xhr.send();
     });
   },

src/Xhr.weapp.js

@@ -1,7 +1,13 @@
 module.exports = class XhrWeapp {
   constructor() {
+    this.UNSENT = 0;
+    this.OPENED = 1;
+    this.HEADERS_RECEIVED = 2;
+    this.LOADING = 3;
+    this.DONE = 4;
+
     this.header = {};
-    this.readyState = 4;
+    this.readyState = this.DONE;
     this.status = 0;
     this.response = '';
     this.responseType = '';
@@ -42,6 +48,7 @@ module.exports = class XhrWeapp {
     }
     this.requestTask.abort();
     this.status = 0;
+    this.response = undefined;
     this.onabort();
     this.onreadystatechange();
   }

src/__tests__/ParseConfig-test.js

@@ -130,7 +130,6 @@ describe('ParseConfig', () => {
   it('can save a config object that be retrieved with masterkey only', async () => {
     CoreManager.setRESTController({
       request(method, path, body, options) {
-        console.log(method, path, body, options);
         if (method === 'PUT') {
           expect(method).toBe('PUT');
           expect(path).toBe('config');

src/__tests__/ParseFile-test.js

@@ -315,7 +315,7 @@ describe('FileController', () => {
         });
       });
 
-    jest.spyOn(defaultController, 'saveBase64');
+    const spy2 = jest.spyOn(defaultController, 'saveBase64');
     await file.save();
     expect(defaultController.download).toHaveBeenCalledTimes(1);
     expect(defaultController.saveBase64).toHaveBeenCalledTimes(1);
@@ -324,6 +324,25 @@ describe('FileController', () => {
       format: 'base64', base64: 'ParseA==', type: 'image/png'
     });
     spy.mockRestore();
+    spy2.mockRestore();
+  });
+
+  it('save with uri download abort', async () => {
+    const file = new ParseFile('parse.png', { uri: 'https://example.com/image.png' });
+    const spy = jest.spyOn(
+      defaultController,
+      'download'
+    )
+      .mockImplementationOnce(() => {
+        return Promise.resolve({});
+      });
+
+    const spy2 = jest.spyOn(defaultController, 'saveBase64');
+    await file.save();
+    expect(defaultController.download).toHaveBeenCalledTimes(1);
+    expect(defaultController.saveBase64).toHaveBeenCalledTimes(0);
+    spy.mockRestore();
+    spy2.mockRestore();
   });
 
   it('download with base64 http', async () => {
@@ -352,6 +371,32 @@ describe('FileController', () => {
     spy.mockRestore();
   });
 
+  it('download with base64 http abort', async () => {
+    defaultController._setXHR(null);
+    const mockRequest = Object.create(EventEmitter.prototype);
+    const mockResponse = Object.create(EventEmitter.prototype);
+    EventEmitter.call(mockRequest);
+    EventEmitter.call(mockResponse);
+    mockResponse.setEncoding = function() {}
+    mockResponse.headers = {
+      'content-type': 'image/png'
+    };
+    const spy = jest.spyOn(mockHttp, 'get')
+      .mockImplementationOnce((uri, cb) => {
+        cb(mockResponse);
+        return mockRequest;
+      });
+    const options = {
+      requestTask: () => {},
+    };
+    defaultController.download('http://example.com/image.png', options).then((data) => {
+      expect(data).toEqual({});
+    });
+    mockRequest.emit('aborted');
+    mockResponse.emit('end');
+    spy.mockRestore();
+  });
+
   it('download with base64 https', async () => {
     defaultController._setXHR(null);
     const mockResponse = Object.create(EventEmitter.prototype);
@@ -381,6 +426,7 @@ describe('FileController', () => {
   it('download with ajax', async () => {
     const mockXHR = function () {
       return {
+        DONE: 4,
         open: jest.fn(),
         send: jest.fn().mockImplementation(function() {
           this.response = [61, 170, 236, 120];
@@ -395,12 +441,45 @@ describe('FileController', () => {
       };
     };
     defaultController._setXHR(mockXHR);
-
-    const data = await defaultController.download('https://example.com/image.png');
+    const options = {
+      requestTask: () => {},
+    };
+    const data = await defaultController.download('https://example.com/image.png', options);
     expect(data.base64).toBe('ParseA==');
     expect(data.contentType).toBe('image/png');
   });
 
+  it('download with ajax abort', async () => {
+    const mockXHR = function () {
+      return {
+        open: jest.fn(),
+        send: jest.fn().mockImplementation(function() {
+          this.response = [61, 170, 236, 120];
+          this.readyState = 2;
+          this.onreadystatechange();
+        }),
+        getResponseHeader: function() {
+          return 'image/png';
+        },
+        abort: function() {
+          this.status = 0;
+          this.response = undefined;
+          this.readyState = 4;
+          this.onreadystatechange()
+        }
+      };
+    };
+    defaultController._setXHR(mockXHR);
+    let _requestTask;
+    const options = {
+      requestTask: (task) => _requestTask = task,
+    };
+    defaultController.download('https://example.com/image.png', options).then((data) => {
+      expect(data).toEqual({});
+    });
+    _requestTask.abort();
+  });
+
   it('download with ajax error', async () => {
     const mockXHR = function () {
       return {
@@ -411,9 +490,11 @@ describe('FileController', () => {
       };
     };
     defaultController._setXHR(mockXHR);
-
+    const options = {
+      requestTask: () => {},
+    };
     try {
-      await defaultController.download('https://example.com/image.png');
+      await defaultController.download('https://example.com/image.png', options);
     } catch (e) {
       expect(e).toBe('error thrown');
     }
@@ -453,7 +534,8 @@ describe('FileController', () => {
       defaultController,
       'download'
     )
-      .mockImplementationOnce(() => {
+      .mockImplementationOnce((uri, options) => {
+        options.requestTask(null);
         return Promise.resolve({
           base64: 'ParseA==',
           contentType: 'image/png',