Mobile Platform as a Service:Use MPH5OpenFileChooserProvider

Scenarios

If the default file selection behavior of the <input type="file"/> tag in an HTML5 offline package does not meet your needs, you can implement a custom image selection feature. For features such as customizing the image selection style, allowing multiple image selections, or handling dynamic permissions, use MPH5OpenFileChooserProvider.

Implementation

1. Register MPH5OpenFileChooserProvider in the callback after mPaaS initialization is complete.

   H5Utils.setProvider(MPH5OpenFileChooserProvider.class.getName(), 
                       new MPH5OpenFileChooserProvider() {
                           @Override
                           public boolean needIntercept(Activity activity, ValueCallback valueCallback, boolean b, APFileChooserParams apFileChooserParams) {
                               // If the custom image selection feature is not needed, return false to avoid intercepting the HTML5 container. By default, the container is not intercepted.
                               // To use the custom image selection feature, intercept the HTML5 container and return true.
                               return true;
                           }
   
                           @Override
                           public void openFileChooser(Activity activity, ValueCallback valueCallback, boolean b, APFileChooserParams apFileChooserParams) {
                               // Get a valid URI and pass it to the frontend.
                               // This method must be called. Otherwise, the next click callback will not be executed.
                               // 1. Use an intent to open an Activity that calls the system album or camera.
                               // 2. Get the selected image.
                               // 3. Close the page and pass the image to the frontend through valueCallback.
                               valueCallback.onReceiveValue(xx);
                           }
                       });

   Important

   The valueCallback.onReceiveValue(xx) function must be called. If it is not called, the next click callback will not be executed.

2. Select and process the image in the openFileChooser callback function.

   1. Use an intent to open an Activity and open the system's photo album or camera.

   2. Retrieve the selected image.

   3. Close the Activity and pass the image to the frontend using valueCallback.

Reference solutions

Solution 1

1. Register a broadcast listener in the openFileChooser callback method.

2. In the openFileChooser method, use an Intent to navigate to a custom Activity.

3. Call the system's camera or image selection SDK. You can add extensions, such as an image clipping feature.

4. Use the image selection Activity to retrieve the final selected image. Send a broadcast to the broadcast listener for the openFileChooser callback, and then close the Activity.

5. The value is passed to the frontend using the valueCallback.onReceiveValue(xx) method of the WebView component.

Solution 2

1. In the openFileChooser method, use an Intent to navigate to an Activity and pass the valueCallback to that Activity.

2. Call the system's camera or image selection SDK. You can add extensions, such as an image clipping feature.

3. Data is passed to the frontend through the valueCallback.onReceiveValue(xx) method of the WebView.

4. Close the Activity.