Implement Blob support for XMLHttpRequest

Libraries/Blob/Blob.js

@@ -12,12 +12,7 @@
 
 'use strict';
 
-const invariant = require('fbjs/lib/invariant');
-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.
@@ -57,61 +52,38 @@ 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) {
+      return this._data;
+    }
+    throw new Error('Blob has been closed and is no longer available');
+  }
+
   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;
@@ -126,8 +98,8 @@ class Blob {
         size = end - start;
       }
     }
-    return Blob.create({
-      blobId: this.blobId,
+    return BlobManager.createFromOptions({
+      blobId: this.data.blobId,
       offset,
       size,
     });
@@ -146,7 +118,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,88 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+const uuid = require('uuid');
+const Blob = require('Blob');
+const BlobRegistry = require('BlobRegistry');
+const { BlobModule } = require('NativeModules');
+
+import type { BlobData, BlobOptions } from 'BlobTypes';
+
+/**
+ * Module to manage blobs
+ */
+class BlobManager {
+
+  /**
+   * Create blob from existing array of blobs.
+   */
+  static createFromParts(parts: Array<Blob | string>, options?: BlobOptions): Blob {
+    const blobId = uuid.v4();
+    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) {
+    BlobRegistry.unregister(blobId);
+    if (BlobRegistry.has(blobId)) {
+      return;
+    }
+    BlobModule.release(blobId);
+  }
+}
+
+module.exports = BlobManager;

Libraries/Blob/BlobRegistry.js

@@ -0,0 +1,40 @@
+/**
+ * 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
+ */
+
+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

@@ -12,14 +12,16 @@
 
 '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,
 };

Libraries/Blob/File.js

@@ -0,0 +1,46 @@
+/**
+ * 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 File
+ * @flow
+ */
+'use strict';
+
+const Blob = require('Blob');
+
+import type { BlobOptions } from 'BlobTypes';
+
+/**
+ * The File interface provides information about files.
+ */
+class File extends Blob {
+
+  /**
+   * Constructor for JS consumers.
+   */
+  constructor(parts: Array<Blob | string> = [], name?: string, options?: BlobOptions) {
+    super(parts, options);
+    this.data.name = name;
+  }
+
+  /**
+   * Name of the file.
+   */
+  get name(): string {
+    return this.data.name || '';
+  }
+
+  /*
+   * Last modified time of the file.
+   */
+  get lastModified(): number {
+    return this.data.lastModified || 0;
+  }
+}
+
+module.exports = File;