Feat: support of multiple selection in media upload

android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -45,11 +45,11 @@ public void requestMediaPickerFromDeviceCamera(MediaUploadCallback mediaUploadCa
             }
 
             @Override
-            public void requestMediaPickFromDeviceLibrary(MediaUploadCallback mediaUploadCallback, MediaType mediaType) {
+            public void requestMediaPickFromDeviceLibrary(MediaUploadCallback mediaUploadCallback, Boolean allowMultipleSelection, MediaType mediaType) {
             }
 
             @Override
-            public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelectedCallback, MediaType mediaType) {
+            public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection, MediaType mediaType) {
             }
 
 

ios/gutenberg/GutenbergViewController.swift

@@ -64,7 +64,7 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
         print("↳ HTML: \(html)")
     }
 
-    func gutenbergDidRequestMedia(from source: MediaPickerSource, filter: [MediaFilter]?, with callback: @escaping MediaPickerDidPickMediaCallback) {
+    func gutenbergDidRequestMedia(from source: MediaPickerSource, filter: [MediaFilter]?, allowMultipleSelection: Bool, with callback: @escaping MediaPickerDidPickMediaCallback) {
         guard let currentFilter = filter?.first else {
             return
         }
@@ -73,9 +73,17 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
             print("Gutenberg did request media picker, passing a sample url in callback")
             switch currentFilter {
             case .image:
-                callback(1, "https://cldup.com/cXyG__fTLN.jpg")
+                if(allowMultipleSelection) {
+                    callback([(1, "https://cldup.com/cXyG__fTLN.jpg"), (3, "https://cldup.com/cXyG__fTLN.jpg")])
+                } else {
+                    callback([(1, "https://cldup.com/cXyG__fTLN.jpg")])
+                }
             case .video:
-                callback(2, "https://i.cloudup.com/YtZFJbuQCE.mov")
+                if(allowMultipleSelection) {
+                    callback([(2, "https://i.cloudup.com/YtZFJbuQCE.mov"), (4, "https://i.cloudup.com/YtZFJbuQCE.mov")])
+                } else {
+                    callback([(2, "https://i.cloudup.com/YtZFJbuQCE.mov")])
+                }
             default:
                 break
             }
@@ -90,16 +98,16 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
 
     func gutenbergDidRequestImport(from url: URL, with callback: @escaping MediaPickerDidPickMediaCallback) {
         let id = mediaUploadCoordinator.upload(url: url)
-        callback(id, url.absoluteString)
+        callback([(id, url.absoluteString)])
     }
 
     func pickAndUpload(from source: UIImagePickerController.SourceType, filter: MediaFilter, callback: @escaping MediaPickerDidPickMediaCallback) {
         mediaPickCoordinator = MediaPickCoordinator(presenter: self, filter: filter, callback: { (url) in
             guard let url = url, let mediaID = self.mediaUploadCoordinator.upload(url: url) else {
-                callback(nil, nil)
+                callback([(nil, nil)])
                 return
             }
-            callback(mediaID, url.absoluteString)
+            callback([(mediaID, url.absoluteString)])
             self.mediaPickCoordinator = nil
         } )
         mediaPickCoordinator?.pick(from: source)

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java

@@ -1,18 +1,27 @@
 package org.wordpress.mobile.ReactNativeGutenbergBridge;
 
 import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.WritableMap;
+
+import java.util.List;
 
 public interface GutenbergBridgeJS2Parent {
+    interface RNMedia {
+        String getUrl();
+        int getId();
+        WritableMap toMap();
+    }
+
     void responseHtml(String title, String html, boolean changed);
 
     void editorDidMount(ReadableArray unsupportedBlockNames);
 
     interface MediaSelectedCallback {
-        void onMediaSelected(int mediaId, String mediaUrl);
+        void onMediaSelected(List<RNMedia> mediaList);
     }
 
     interface MediaUploadCallback {
-        void onUploadMediaFileSelected(int mediaId, String mediaUri);
+        void onUploadMediaFileSelected(List<RNMedia> mediaList);
         void onUploadMediaFileClear(int mediaId);
         void onMediaFileUploadProgress(int mediaId, float progress);
         void onMediaFileUploadSucceeded(int mediaId, String mediaUrl, int serverId);
@@ -65,9 +74,9 @@ public static MediaType getEnum(String value) {
         }
     }
 
-    void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelectedCallback, MediaType mediaType);
+    void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection, MediaType mediaType);
 
-    void requestMediaPickFromDeviceLibrary(MediaUploadCallback mediaUploadCallback, MediaType mediaType);
+    void requestMediaPickFromDeviceLibrary(MediaUploadCallback mediaUploadCallback, Boolean allowMultipleSelection, MediaType mediaType);
 
     void requestMediaPickerFromDeviceCamera(MediaUploadCallback mediaUploadCallback, MediaType mediaType);
 

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java

@@ -7,11 +7,16 @@
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.WritableNativeArray;
 import com.facebook.react.bridge.WritableNativeMap;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.MediaSelectedCallback;
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.RNMedia;
+
+import java.util.List;
 
 public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModule {
     private final ReactApplicationContext mReactContext;
@@ -101,14 +106,14 @@ public void editorDidMount(ReadableArray unsupportedBlockNames) {
     }
 
     @ReactMethod
-    public void requestMediaPickFrom(String mediaSource, ReadableArray filter, final Callback onUploadMediaSelected) {
+    public void requestMediaPickFrom(String mediaSource, ReadableArray filter, Boolean allowMultipleSelection, final Callback onUploadMediaSelected) {
         GutenbergBridgeJS2Parent.MediaType mediaType = getMediaTypeFromFilter(filter);
         if (mediaSource.equals(MEDIA_SOURCE_MEDIA_LIBRARY)) {
-            mGutenbergBridgeJS2Parent.requestMediaPickFromMediaLibrary(getNewMediaSelectedCallback(onUploadMediaSelected), mediaType);
+            mGutenbergBridgeJS2Parent.requestMediaPickFromMediaLibrary(getNewMediaSelectedCallback(allowMultipleSelection, onUploadMediaSelected), allowMultipleSelection, mediaType);
         } else if (mediaSource.equals(MEDIA_SOURCE_DEVICE_LIBRARY)) {
-            mGutenbergBridgeJS2Parent.requestMediaPickFromDeviceLibrary(getNewUploadMediaCallback(onUploadMediaSelected), mediaType);
+            mGutenbergBridgeJS2Parent.requestMediaPickFromDeviceLibrary(getNewUploadMediaCallback(allowMultipleSelection, onUploadMediaSelected), allowMultipleSelection, mediaType);
         } else if (mediaSource.equals(MEDIA_SOURCE_DEVICE_CAMERA)) {
-            mGutenbergBridgeJS2Parent.requestMediaPickerFromDeviceCamera(getNewUploadMediaCallback(onUploadMediaSelected), mediaType);
+            mGutenbergBridgeJS2Parent.requestMediaPickerFromDeviceCamera(getNewUploadMediaCallback(false, onUploadMediaSelected), mediaType);
         }
     }
 
@@ -123,12 +128,12 @@ private GutenbergBridgeJS2Parent.MediaType getMediaTypeFromFilter(ReadableArray
 
     @ReactMethod
     public void requestMediaImport(String url, final Callback onUploadMediaSelected) {
-        mGutenbergBridgeJS2Parent.requestMediaImport(url, getNewMediaSelectedCallback(onUploadMediaSelected));
+        mGutenbergBridgeJS2Parent.requestMediaImport(url, getNewMediaSelectedCallback(false, onUploadMediaSelected));
     }
 
     @ReactMethod
     public void mediaUploadSync() {
-        mGutenbergBridgeJS2Parent.mediaUploadSync(getNewUploadMediaCallback(null));
+        mGutenbergBridgeJS2Parent.mediaUploadSync(getNewUploadMediaCallback(false,null));
     }
 
     @ReactMethod
@@ -156,20 +161,34 @@ public void editorDidAutosave() {
         mGutenbergBridgeJS2Parent.editorDidAutosave();
     }
 
-    private MediaSelectedCallback getNewMediaSelectedCallback(final Callback jsCallback) {
+    private MediaSelectedCallback getNewMediaSelectedCallback(final Boolean allowMultipleSelection, final Callback jsCallback) {
         return new MediaSelectedCallback() {
-            @Override public void onMediaSelected(int mediaId, String mediaUrl) {
-                jsCallback.invoke(mediaId, mediaUrl);
+            @Override public void onMediaSelected(List<RNMedia> mediaList) {
+                if(allowMultipleSelection) {
+                    WritableArray writableArray = new WritableNativeArray();
+                    for (RNMedia media : mediaList) {
+                        writableArray.pushMap(media.toMap());
+                    }
+                    jsCallback.invoke(writableArray);
+                } else {
+                    jsCallback.invoke(mediaList.get(0).toMap());
+                }
             }
         };
     }
 
-    private GutenbergBridgeJS2Parent.MediaUploadCallback getNewUploadMediaCallback(final Callback jsCallback) {
+    private GutenbergBridgeJS2Parent.MediaUploadCallback getNewUploadMediaCallback(final Boolean allowMultipleSelection, final Callback jsCallback) {
         return new GutenbergBridgeJS2Parent.MediaUploadCallback() {
             @Override
-            public void onUploadMediaFileSelected(int mediaId, String mediaUri) {
-                if (jsCallback != null) {
-                    jsCallback.invoke(mediaId, mediaUri, 0);
+            public void onUploadMediaFileSelected(List<RNMedia> mediaList) {
+                if(allowMultipleSelection) {
+                    WritableArray writableArray = new WritableNativeArray();
+                    for (RNMedia media : mediaList) {
+                        writableArray.pushMap(media.toMap());
+                    }
+                    jsCallback.invoke(writableArray);
+                } else {
+                    jsCallback.invoke(mediaList.get(0).toMap());
                 }
             }
 

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.java

@@ -0,0 +1,54 @@
+package org.wordpress.mobile.WPAndroidGlue;
+
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.RNMedia;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.WritableNativeMap;
+
+public class Media implements RNMedia {
+    private int mId;
+    private String mUrl;
+    private String mType;
+
+    public Media(int id, String url, String type) {
+        this.mId = id;
+        this.mUrl = url;
+        this.mType = type;
+    }
+
+    public Media(int id, String url) {
+        this.mId = id;
+        this.mUrl = url;
+        this.mType = "";
+    }
+
+    public int getId() {
+        return mId;
+    }
+
+    public void setId(int id) {
+        this.mId = id;
+    }
+
+    public String getUrl() {
+        return mUrl;
+    }
+
+    public void setUrl(String url) {
+        this.mUrl = url;
+    }
+
+    public String getType() {
+        return mType;
+    }
+
+    public void setType(String mediaType) {
+        this.mType = mediaType;
+    }
+
+    public WritableMap toMap() {
+        WritableMap map = new WritableNativeMap();
+        map.putInt("id", mId);
+        map.putString("url", mUrl);
+        return map;
+    }
+}