Permalink
Browse files

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
  • Loading branch information...
satya164 authored and facebook-github-bot committed Jan 26, 2018
1 parent 3fc33bb commit be56a3efeefefa6dca816ca5149a3dabfa5164e2
Showing with 2,056 additions and 382 deletions.
  1. +41 −53 Libraries/Blob/Blob.js
  2. +146 −0 Libraries/Blob/BlobManager.js
  3. +41 −0 Libraries/Blob/BlobRegistry.js
  4. +6 −3 Libraries/Blob/BlobTypes.js
  5. +58 −0 Libraries/Blob/File.js
  6. +156 −0 Libraries/Blob/FileReader.js
  7. +24 −8 Libraries/Blob/RCTBlob.xcodeproj/project.pbxproj
  8. +14 −0 Libraries/Blob/RCTBlobManager.h
  9. +0 −218 Libraries/Blob/RCTBlobManager.m
  10. +290 −0 Libraries/Blob/RCTBlobManager.mm
  11. +14 −0 Libraries/Blob/RCTFileReaderModule.h
  12. +71 −0 Libraries/Blob/RCTFileReaderModule.m
  13. +4 −4 Libraries/Blob/URL.js
  14. +17 −0 Libraries/Blob/__mocks__/BlobModule.js
  15. +21 −0 Libraries/Blob/__mocks__/FileReaderModule.js
  16. +84 −0 Libraries/Blob/__tests__/Blob-test.js
  17. +27 −0 Libraries/Blob/__tests__/BlobManager-test.js
  18. +46 −0 Libraries/Blob/__tests__/File-test.js
  19. +42 −0 Libraries/Blob/__tests__/FileReader-test.js
  20. +2 −0 Libraries/Core/InitializeCore.js
  21. +24 −0 Libraries/Network/RCTNetworking.h
  22. +3 −1 Libraries/Network/RCTNetworking.ios.js
  23. +71 −14 Libraries/Network/RCTNetworking.mm
  24. +23 −8 Libraries/Network/XMLHttpRequest.js
  25. +8 −3 Libraries/Network/convertRequestBody.js
  26. +3 −2 Libraries/WebSocket/RCTWebSocketModule.h
  27. +4 −3 Libraries/WebSocket/RCTWebSocketModule.m
  28. +17 −12 Libraries/WebSocket/WebSocket.js
  29. +13 −0 RNTester/RNTester.xcodeproj/project.pbxproj
  30. +69 −0 RNTester/RNTesterLegacy.xcodeproj/project.pbxproj
  31. +104 −0 RNTester/RNTesterUnitTests/RCTBlobManagerTests.m
  32. +1 −1 React.podspec
  33. +2 −0 ReactAndroid/src/main/java/com/facebook/react/modules/blob/BUCK
  34. +204 −36 ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobModule.java
  35. +91 −0 ReactAndroid/src/main/java/com/facebook/react/modules/blob/FileReaderModule.java
  36. +132 −13 ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java
  37. +14 −3 ReactAndroid/src/main/java/com/facebook/react/modules/network/ResponseUtil.java
  38. +9 −0 ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.java
  39. +1 −0 ReactAndroid/src/test/java/com/facebook/react/modules/BUCK
  40. +159 −0 ReactAndroid/src/test/java/com/facebook/react/modules/blob/BlobModuleTest.java
View
@@ -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 || '';
}
}
@@ -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;
@@ -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,
};
@@ -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,
};
Oops, something went wrong.

0 comments on commit be56a3e

Please sign in to comment.