Fix support for blobs larger than 64 KB on Android

ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobProvider.java

@@ -20,9 +20,15 @@
 import java.io.FileNotFoundException;
 import java.io.IOException;
 import java.io.OutputStream;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
 
 public final class BlobProvider extends ContentProvider {
 
+  private static final int PIPE_CAPACITY = 65536;
+
+  private ExecutorService executor = Executors.newSingleThreadExecutor();
+
   @Override
   public boolean onCreate() {
     return true;
@@ -72,7 +78,7 @@ public ParcelFileDescriptor openFile(Uri uri, String mode) throws FileNotFoundEx
       throw new RuntimeException("No blob module associated with BlobProvider");
     }
 
-    byte[] data = blobModule.resolve(uri);
+    final byte[] data = blobModule.resolve(uri);
     if (data == null) {
       throw new FileNotFoundException("Cannot open " + uri.toString() + ", blob not found.");
     }
@@ -84,12 +90,34 @@ public ParcelFileDescriptor openFile(Uri uri, String mode) throws FileNotFoundEx
       return null;
     }
     ParcelFileDescriptor readSide = pipe[0];
-    ParcelFileDescriptor writeSide = pipe[1];
-
-    try (OutputStream outputStream = new ParcelFileDescriptor.AutoCloseOutputStream(writeSide)) {
-      outputStream.write(data);
-    } catch (IOException exception) {
-      return null;
+    final ParcelFileDescriptor writeSide = pipe[1];
+
+    if (data.length <= PIPE_CAPACITY) {
+      // If the blob length is less than or equal to pipe capacity (64 KB),
+      // we can write the data synchronously to the pipe buffer.
+      try (OutputStream outputStream = new ParcelFileDescriptor.AutoCloseOutputStream(writeSide)) {
+        outputStream.write(data);
+      } catch (IOException exception) {
+        return null;
+      }
+    } else {
+      // For blobs larger than 64 KB, a synchronous write would fill up the whole buffer
+      // and block forever, because there are no readers to empty the buffer.
+      // Writing from a separate thread allows us to return the read side descriptor
+      // immediately so that both writer and reader can work concurrently.
+      // Reading from the pipe empties the buffer and allows the next chunks to be written.
+      Runnable writer =
+          new Runnable() {
+            public void run() {
+              try (OutputStream outputStream =
+                  new ParcelFileDescriptor.AutoCloseOutputStream(writeSide)) {
+                outputStream.write(data);
+              } catch (IOException exception) {
+                // no-op
+              }
+            }
+          };
+      executor.submit(writer);
     }
 
     return readSide;

packages/rn-tester/android/app/src/main/AndroidManifest.xml

@@ -52,6 +52,11 @@
       </intent-filter>
     </activity>
     <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    <provider
+      android:name="com.facebook.react.modules.blob.BlobProvider"
+      android:authorities="@string/blob_provider_authority"
+      android:exported="false"
+    />
   </application>
 
 </manifest>

packages/rn-tester/android/app/src/main/res/values/strings.xml

@@ -1,3 +1,4 @@
 <resources>
     <string name="app_name">RNTester App</string>
+    <string name="blob_provider_authority">com.facebook.react.uiapp.blobs</string>
 </resources>

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -32,6 +32,58 @@ type ImageSource = $ReadOnly<{|
   uri: string,
 |}>;
 
+type BlobImageState = {|
+  objectURL: ?string,
+|};
+
+type BlobImageProps = $ReadOnly<{|
+  url: string,
+|}>;
+
+class BlobImage extends React.Component<BlobImageProps, BlobImageState> {
+  state = {
+    objectURL: null,
+  };
+
+  UNSAFE_componentWillMount() {
+    (async () => {
+      const result = await fetch(this.props.url);
+      const blob = await result.blob();
+      const objectURL = URL.createObjectURL(blob);
+      this.setState({objectURL});
+    })();
+  }
+
+  render() {
+    return this.state.objectURL !== null ? (
+      <Image source={{uri: this.state.objectURL}} style={styles.base} />
+    ) : (
+      <Text>Object URL not created yet</Text>
+    );
+  }
+}
+
+type BlobImageExampleState = {||};
+
+type BlobImageExampleProps = $ReadOnly<{|
+  urls: string[],
+|}>;
+
+class BlobImageExample extends React.Component<
+  BlobImageExampleProps,
+  BlobImageExampleState,
+> {
+  render() {
+    return (
+      <View style={styles.horizontal}>
+        {this.props.urls.map(url => (
+          <BlobImage key={url} url={url} />
+        ))}
+      </View>
+    );
+  }
+}
+
 type NetworkImageCallbackExampleState = {|
   events: Array<string>,
   startLoadPrefetched: boolean,
@@ -608,6 +660,21 @@ exports.examples = [
       return <Image source={fullImage} style={styles.base} />;
     },
   },
+  {
+    title: 'Plain Blob Image',
+    description: ('If the `source` prop `uri` property is an object URL, ' +
+      'then it will be resolved using `BlobProvider` (Android) or `RCTBlobManager` (iOS).': string),
+    render: function(): React.Node {
+      return (
+        <BlobImageExample
+          urls={[
+            'https://www.facebook.com/favicon.ico',
+            'https://www.facebook.com/ads/pics/successstories.png',
+          ]}
+        />
+      );
+    },
+  },
   {
     title: 'Plain Static Image',
     description: ('Static assets should be placed in the source code tree, and ' +