Implement Blob support for XMLHttpRequest

Summary:
This PR is a followup to #11417 and should be merged after that one is merged.

  1. Add support for creating blobs from strings, not just other blobs
  1. Add the `File` constructor which is a superset of `Blob`
  1. Add the `FileReader` API which can be used to read blobs as strings or data url (base64)
  1. Add support for uploading and downloading blobs via `XMLHttpRequest` and `fetch`
  1. Add ability to download local files on Android so you can do `fetch(uri).then(res => res.blob())` to get a blob for a local file (iOS already supported this)

  1. Clone the repo https://github.com/expo/react-native-blob-test
  1. Change the `package.json` and update `react-native` dependency to point to this branch, then run `npm install`
  1. Run the `server.js` file with `node server.js`
  1. Open the `index.common.js` file and replace `localhost` with your computer's IP address
  1. Start the packager with `yarn start` and run the app on your device

If everything went well, all tests should pass, and you should see a screen like this:

![screen shot 2017-06-08 at 7 53 08 pm](https://user-images.githubusercontent.com/1174278/26936407-435bbce2-4c8c-11e7-9ae3-eb104e46961e.png)!

Pull to rerun all tests or tap on specific test to re-run it

  [GENERAL] [FEATURE] [Blob] - Implement blob support for XMLHttpRequest
Closes #11573

Reviewed By: shergin

Differential Revision: D6082054

Pulled By: hramos

fbshipit-source-id: cc9c174fdefdfaf6e5d9fd7b300120a01a50e8c1

Author: satya164

Libraries/Blob/Blob.js

@@ -8,19 +8,12 @@
  *
  * @providesModule Blob
  * @flow
+ * @format
  */
 
 'use strict';
 
-const invariant = require('fbjs/lib/invariant');
-/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
- * found when Flow v0.54 was deployed. To see the error delete this comment and
- * run Flow. */
-const uuid = require('uuid');
-
-const { BlobModule } = require('NativeModules');
-
-import type { BlobProps } from 'BlobTypes';
+import type {BlobData, BlobOptions} from 'BlobTypes';
 
 /**
  * Opaque JS representation of some binary data in native.
@@ -60,61 +53,39 @@ import type { BlobProps } from 'BlobTypes';
  * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Blob
  */
 class Blob {
-  /**
-   * Size of the data contained in the Blob object, in bytes.
-   */
-  size: number;
-  /*
-   * String indicating the MIME type of the data contained in the Blob.
-   * If the type is unknown, this string is empty.
-   */
-  type: string;
-
-  /*
-   * Unique id to identify the blob on native side (non-standard)
-   */
-  blobId: string;
-  /*
-   * Offset to indicate part of blob, used when sliced (non-standard)
-   */
-  offset: number;
-
-  /**
-   * Construct blob instance from blob data from native.
-   * Used internally by modules like XHR, WebSocket, etc.
-   */
-  static create(props: BlobProps): Blob {
-    return Object.assign(Object.create(Blob.prototype), props);
-  }
+  _data: ?BlobData;
 
   /**
    * Constructor for JS consumers.
    * Currently we only support creating Blobs from other Blobs.
    * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob
    */
-  constructor(parts: Array<Blob>, options: any) {
-    const blobId = uuid();
-    let size = 0;
-    parts.forEach((part) => {
-      invariant(part instanceof Blob, 'Can currently only create a Blob from other Blobs');
-      size += part.size;
-    });
-    BlobModule.createFromParts(parts, blobId);
-    return Blob.create({
-      blobId,
-      offset: 0,
-      size,
-    });
+  constructor(parts: Array<Blob | string> = [], options?: BlobOptions) {
+    const BlobManager = require('BlobManager');
+    this.data = BlobManager.createFromParts(parts, options).data;
   }
 
   /*
    * This method is used to create a new Blob object containing
    * the data in the specified range of bytes of the source Blob.
    * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice
    */
+  set data(data: ?BlobData) {
+    this._data = data;
+  }
+
+  get data(): BlobData {
+    if (!this._data) {
+      throw new Error('Blob has been closed and is no longer available');
+    }
+
+    return this._data;
+  }
+
   slice(start?: number, end?: number): Blob {
-    let offset = this.offset;
-    let size = this.size;
+    const BlobManager = require('BlobManager');
+    let {offset, size} = this.data;
+
     if (typeof start === 'number') {
       if (start > size) {
         start = size;
@@ -129,8 +100,8 @@ class Blob {
         size = end - start;
       }
     }
-    return Blob.create({
-      blobId: this.blobId,
+    return BlobManager.createFromOptions({
+      blobId: this.data.blobId,
       offset,
       size,
     });
@@ -149,7 +120,24 @@ class Blob {
    * `new Blob([blob, ...])` actually copies the data in memory.
    */
   close() {
-    BlobModule.release(this.blobId);
+    const BlobManager = require('BlobManager');
+    BlobManager.release(this.data.blobId);
+    this.data = null;
+  }
+
+  /**
+   * Size of the data contained in the Blob object, in bytes.
+   */
+  get size(): number {
+    return this.data.size;
+  }
+
+  /*
+   * String indicating the MIME type of the data contained in the Blob.
+   * If the type is unknown, this string is empty.
+   */
+  get type(): string {
+    return this.data.type || '';
   }
 }
 

Libraries/Blob/BlobManager.js

@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BlobManager
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+const Blob = require('Blob');
+const BlobRegistry = require('BlobRegistry');
+const {BlobModule} = require('NativeModules');
+
+import type {BlobData, BlobOptions} from 'BlobTypes';
+
+/*eslint-disable no-bitwise */
+/*eslint-disable eqeqeq */
+
+/**
+ * Based on the rfc4122-compliant solution posted at
+ * http://stackoverflow.com/questions/105034
+ */
+function uuidv4(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+    const r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+/**
+ * Module to manage blobs. Wrapper around the native blob module.
+ */
+class BlobManager {
+  /**
+   * If the native blob module is available.
+   */
+  static isAvailable = !!BlobModule;
+
+  /**
+   * Create blob from existing array of blobs.
+   */
+  static createFromParts(
+    parts: Array<Blob | string>,
+    options?: BlobOptions,
+  ): Blob {
+    const blobId = uuidv4();
+    const items = parts.map(part => {
+      if (
+        part instanceof ArrayBuffer ||
+        (global.ArrayBufferView && part instanceof global.ArrayBufferView)
+      ) {
+        throw new Error(
+          "Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported",
+        );
+      }
+      if (part instanceof Blob) {
+        return {
+          data: part.data,
+          type: 'blob',
+        };
+      } else {
+        return {
+          data: String(part),
+          type: 'string',
+        };
+      }
+    });
+    const size = items.reduce((acc, curr) => {
+      if (curr.type === 'string') {
+        return acc + global.unescape(encodeURI(curr.data)).length;
+      } else {
+        return acc + curr.data.size;
+      }
+    }, 0);
+
+    BlobModule.createFromParts(items, blobId);
+
+    return BlobManager.createFromOptions({
+      blobId,
+      offset: 0,
+      size,
+      type: options ? options.type : '',
+      lastModified: options ? options.lastModified : Date.now(),
+    });
+  }
+
+  /**
+   * Create blob instance from blob data from native.
+   * Used internally by modules like XHR, WebSocket, etc.
+   */
+  static createFromOptions(options: BlobData): Blob {
+    BlobRegistry.register(options.blobId);
+    return Object.assign(Object.create(Blob.prototype), {data: options});
+  }
+
+  /**
+   * Deallocate resources for a blob.
+   */
+  static release(blobId: string): void {
+    BlobRegistry.unregister(blobId);
+    if (BlobRegistry.has(blobId)) {
+      return;
+    }
+    BlobModule.release(blobId);
+  }
+
+  /**
+   * Inject the blob content handler in the networking module to support blob
+   * requests and responses.
+   */
+  static addNetworkingHandler(): void {
+    BlobModule.addNetworkingHandler();
+  }
+
+  /**
+   * Indicate the websocket should return a blob for incoming binary
+   * messages.
+   */
+  static addWebSocketHandler(socketId: number): void {
+    BlobModule.addWebSocketHandler(socketId);
+  }
+
+  /**
+   * Indicate the websocket should no longer return a blob for incoming
+   * binary messages.
+   */
+  static removeWebSocketHandler(socketId: number): void {
+    BlobModule.removeWebSocketHandler(socketId);
+  }
+
+  /**
+   * Send a blob message to a websocket.
+   */
+  static sendOverSocket(blob: Blob, socketId: number): void {
+    BlobModule.sendOverSocket(blob.data, socketId);
+  }
+}
+
+module.exports = BlobManager;

Libraries/Blob/BlobRegistry.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BlobRegistry
+ * @flow
+ * @format
+ */
+
+const registry: {[key: string]: number} = {};
+
+const register = (id: string) => {
+  if (registry[id]) {
+    registry[id]++;
+  } else {
+    registry[id] = 1;
+  }
+};
+
+const unregister = (id: string) => {
+  if (registry[id]) {
+    registry[id]--;
+    if (registry[id] <= 0) {
+      delete registry[id];
+    }
+  }
+};
+
+const has = (id: string) => {
+  return registry[id] && registry[id] > 0;
+};
+
+module.exports = {
+  register,
+  unregister,
+  has,
+};

Libraries/Blob/BlobTypes.js

@@ -8,18 +8,21 @@
  *
  * @providesModule BlobTypes
  * @flow
+ * @format
  */
 
 'use strict';
 
-export type BlobProps = {
+export type BlobData = {
   blobId: string,
   offset: number,
   size: number,
+  name?: string,
   type?: string,
+  lastModified?: number,
 };
 
-export type FileProps = BlobProps & {
-  name: string,
+export type BlobOptions = {
+  type: string,
   lastModified: number,
 };