Use MPH5OpenFileChooserProvider

Scenarios

When the default file-selection behavior of the <input type="file"/> tag in an HTML5 offline package does not meet your needs, use MPH5OpenFileChooserProvider to take over image selection. This lets you customize the selection UI, support multiple selections, and handle dynamic permissions.

Implementation

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

   Pass a MPH5OpenFileChooserProvider instance to H5Utils.setProvider. The instance overrides two methods:

   • needIntercept: Controls whether your custom implementation takes over. Return true to intercept the HTML5 container and use your custom logic; return false to fall through to the default behavior.

   • openFileChooser: Contains your custom image-selection logic. This method runs only when needIntercept returns true.

     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

     Always call valueCallback.onReceiveValue(xx) before closing the Activity, even if the user cancels. If this call is skipped, the HTML5 container suppresses subsequent click events on the same <input> element.

2. Implement your image-selection logic inside the openFileChooser callback:

   1. Use an Intent to launch a custom Activity that opens the system photo album or camera.

   2. Retrieve the selected image from the result.

   3. Pass the image URI to the frontend via valueCallback, then close the Activity.

Reference solutions

Both solutions implement the same three-phase flow: launch a selection Activity → get the result → call valueCallback.onReceiveValue(xx) to pass the data back. They differ in how the result travels from the selection Activity to the openFileChooser callback.

Solution 1

Use a broadcast to decouple the selection Activity from the openFileChooser callback.

1. In the openFileChooser callback, register a broadcast receiver that waits for the selection result.

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

3. Call the system camera or photo-album SDK. Add optional extensions, such as image cropping.

4. After selection, send a broadcast from the selection Activity to the registered receiver, then close the Activity. The broadcast carries the result back to the openFileChooser callback context.

5. In the broadcast receiver, call valueCallback.onReceiveValue(xx) on the WebView to return the selected file to the frontend.

Solution 2

Pass valueCallback directly to the selection Activity and call it there.

1. In the openFileChooser method, use an Intent to navigate to a custom Activity, passing the valueCallback to that Activity as an extra.

2. Call the system camera or photo-album SDK. Add optional extensions, such as image cropping.

3. Call valueCallback.onReceiveValue(xx) on the WebView to return the selected file to the frontend.

4. Close the Activity.