Provide base64 encoded image in event

Author: stwiname

Libraries/Components/TextInput/TextInput.js

@@ -120,9 +120,10 @@ export type EditingEvent = SyntheticEvent<
 >;
 
 export type ImageInputEvent = SyntheticEvent<
-  $Readonly<{|
+  $ReadOnly<{|
     uri: string,
     linkUri: string,
+    data: string,
     mime: string,
   |}>,
 >;
@@ -1034,8 +1035,8 @@ function InternalTextInput(props: Props): React.Node {
   };
 
   const _onImageInput = (event: ImageInputEvent) => {
-    this.props.onImageInput && this.props.onImageInput(event);
-  }
+    props.onImageInput && props.onImageInput(event);
+  };
 
   let textInput = null;
   let additionalTouchableProps: {|

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ImageInputWatcher.java

@@ -8,5 +8,5 @@
 package com.facebook.react.views.textinput;
 
 public interface ImageInputWatcher {
-  public void onImageInput(String uri, String linkUri, String mime);
+  public void onImageInput(String uri, String linkUri, String data, String mime);
 }

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

@@ -34,8 +34,11 @@
 import android.view.inputmethod.EditorInfo;
 import android.view.inputmethod.InputConnection;
 import android.view.inputmethod.InputMethodManager;
+import android.util.Base64;
+import android.util.Base64OutputStream;
 import androidx.annotation.Nullable;
 import androidx.appcompat.widget.AppCompatEditText;
+import androidx.core.os.BuildCompat;
 import androidx.core.view.AccessibilityDelegateCompat;
 import androidx.core.view.ViewCompat;
 import androidx.core.view.inputmethod.EditorInfoCompat;
@@ -52,6 +55,11 @@
 import com.facebook.react.views.text.TextAttributes;
 import com.facebook.react.views.text.TextInlineImageSpan;
 import com.facebook.react.views.view.ReactViewBackgroundManager;
+import java.io.ByteArrayOutputStream;
+import java.io.File;
+import java.io.FileInputStream;
+import java.io.InputStream;
+import java.io.IOException;
 import java.util.ArrayList;
 
 /**
@@ -95,6 +103,7 @@ public class ReactEditText extends AppCompatEditText {
   private @Nullable SelectionWatcher mSelectionWatcher;
   private @Nullable ContentSizeWatcher mContentSizeWatcher;
   private @Nullable ScrollWatcher mScrollWatcher;
+  private @Nullable ImageInputWatcher mImageInputWatcher;
   private final InternalKeyListener mKeyListener;
   private boolean mDetectScrollMovement = false;
   private boolean mOnKeyPress = false;
@@ -136,6 +145,7 @@ public ReactEditText(Context context) {
     mStagedInputType = getInputType();
     mKeyListener = new InternalKeyListener();
     mScrollWatcher = null;
+    mImageInputWatcher = null;
     mTextAttributes = new TextAttributes();
 
     applyTextAttributes();
@@ -227,10 +237,14 @@ protected void onScrollChanged(int horiz, int vert, int oldHoriz, int oldVert) {
     @Override
   public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
 
-    ReactContext reactContext = getReactContext(this);
+    final ReactContext reactContext = getReactContext(this);
     InputConnection ic = super.onCreateInputConnection(outAttrs);
 
-    EditorInfoCompat.setContentMimeTypes(outAttrs, new String [] {"image/png", "image/gif", "image/jpg", "image/jpeg"});
+    EditorInfoCompat.setContentMimeTypes(outAttrs, new String [] {"image/png",
+      "image/gif",
+      "image/jpg",
+      "image/jpeg",
+      "image/webp"});
 
     final InputConnectionCompat.OnCommitContentListener callback =
       new InputConnectionCompat.OnCommitContentListener() {
@@ -247,14 +261,28 @@ public boolean onCommitContent(InputContentInfoCompat inputContentInfo, int flag
             }
           }
 
+          // Avoid loading the image into memory if its not going to be used
+          if (mImageInputWatcher == null) {
+            return false;
+          }
+
           String uri = null;
           String linkUri = null;
           String mime = null;
+          String data = null;
 
-          // Get the uri to the local content
           Uri contentUri = inputContentInfo.getContentUri();
           if (contentUri != null) {
             uri = contentUri.toString();
+
+            // Load the data, we have to do this now otherwise we cannot release permissions
+            try {
+              data = loadFile(reactContext, contentUri);
+            }
+            catch(IOException e) {
+              inputContentInfo.releasePermission();
+              return false;
+            }
           }
 
           // Get the optional uri to web link
@@ -263,26 +291,24 @@ public boolean onCommitContent(InputContentInfoCompat inputContentInfo, int flag
             linkUri = link.toString();
           }
 
-          // Get the mime type of the image
           ClipDescription description = inputContentInfo.getDescription();
           if (description != null && description.getMimeTypeCount() > 0) {
             mime = description.getMimeType(0);
           }
 
           if (mImageInputWatcher != null) {
-            mImageInputWatcher.onImageInput(uri, linkUri, mime);
+            mImageInputWatcher.onImageInput(uri, linkUri, data, mime);
           }
 
-          // TODO find better place to call this
-          // inputContentInfo.releasePermission();
+          // Releasing the permission means that the content at the uri is probably no longer accessible
+          inputContentInfo.releasePermission();
 
           return true;
         }
       };
 
     InputConnection inputConnection = InputConnectionCompat.createWrapper(ic, outAttrs, callback);
 
->>>>>>> Add support for image keyboards to TextInput on Android
     if (inputConnection != null && mOnKeyPress) {
       inputConnection = new ReactEditTextInputConnectionWrapper(inputConnection, reactContext, this);
     }
@@ -355,6 +381,10 @@ public void setScrollWatcher(ScrollWatcher scrollWatcher) {
     mScrollWatcher = scrollWatcher;
   }
 
+  public void setImageInputWatcher(ImageInputWatcher imageInputWatcher) {
+    mImageInputWatcher = imageInputWatcher;
+  }
+
   @Override
   public void setSelection(int start, int end) {
     // Skip setting the selection if the text wasn't set because of an out of date value.
@@ -864,6 +894,24 @@ protected void applyTextAttributes() {
     }
   }
 
+  private static String loadFile(Context context, Uri contentUri) throws IOException {
+    InputStream inputStream = context.getContentResolver().openInputStream(contentUri);
+    byte[] buffer = new byte[8192];
+    int bytesRead;
+    ByteArrayOutputStream output = new ByteArrayOutputStream();
+    Base64OutputStream output64 = new Base64OutputStream(output, Base64.DEFAULT);
+    try {
+        while ((bytesRead = inputStream.read(buffer)) != -1) {
+            output64.write(buffer, 0, bytesRead);
+        }
+    } catch (IOException e) {
+        e.printStackTrace();
+    }
+    output64.close();
+
+    return output.toString();
+  }
+
   /**
    * This class will redirect *TextChanged calls to the listeners only in the case where the text is
    * changed by the user, and not explicitly set by JS.

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputImageEvent.java

@@ -18,20 +18,23 @@
  */
 public class ReactTextInputImageEvent extends Event<ReactTextInputImageEvent> {
 
-  public static final String EVENT_NAME = "topImage";
+  public static final String EVENT_NAME = "topImageInput";
 
   private String mUri;
   private String mLinkUri;
+  private String mData;
   private String mMime;
 
   public ReactTextInputImageEvent(
       int viewId,
       String uri,
       String linkUri,
+      String data,
       String mime) {
     super(viewId);
     mUri = uri;
     mLinkUri = linkUri;
+    mData = data;
     mMime = mime;
   }
 
@@ -49,6 +52,7 @@ private WritableMap serializeEventData() {
     WritableMap eventData = Arguments.createMap();
     eventData.putString("uri", mUri);
     eventData.putString("linkUri", mLinkUri);
+    eventData.putString("data", mData);
     eventData.putString("mime", mMime);
     eventData.putInt("target", getViewTag());
     return eventData;

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

@@ -166,11 +166,6 @@ public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
             MapBuilder.of(
                 "phasedRegistrationNames",
                 MapBuilder.of("bubbled", "onKeyPress", "captured", "onKeyPressCapture")))
-        .put(
-            "topImageInput",
-            MapBuilder.of(
-                "phasedRegistrationNames",
-                MapBuilder.of("bubbled", "onImageInput", "captured", "onImageInputCapture")))
         .build();
   }
 
@@ -181,6 +176,7 @@ public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
         .put(
             ScrollEventType.getJSEventName(ScrollEventType.SCROLL),
             MapBuilder.of("registrationName", "onScroll"))
+        .put("topImageInput", MapBuilder.of("registrationName", "onImageInput"))
         .build();
   }
 
@@ -1194,12 +1190,13 @@ public ReactImageInputWatcher(ReactEditText editText) {
     }
 
     @Override
-    public void onImageInput(String uri, String linkUri, String mime) {
+    public void onImageInput(String uri, String linkUri, String data, String mime) {
       if (uri != null) {
         ReactTextInputImageEvent event = new ReactTextInputImageEvent(
           mReactEditText.getId(),
           uri,
           linkUri,
+          data,
           mime);
 
         mEventDispatcher.dispatchEvent(event);