All Products
Search
Document Center

Mobile Platform as a Service:Use MPH5OpenFileChooserProvider

Last Updated:Feb 28, 2023

Scenarios

When you use <input type="file"/> to select files or images in the HTML5 offline package, you can customize image selection as needed. For example, select the image style, select multiple images, and handle dynamic permission using MPH5OpenFileChooserProvider.

Implementation

  1. Register MPH5OpenFileChooserProvider in the callback after mobile PaaS (mPaaS) is initialized.

    H5Utils.setProvider(MPH5OpenFileChooserProvider.class.getName(), 
                        new MPH5OpenFileChooserProvider() {
                            @Override
                            public boolean needIntercept(Activity activity, ValueCallback valueCallback, boolean b, APFileChooserParams apFileChooserParams) {
                                // If you use "return false" by default, the HTML5 container will not be intercepted.
                                // If you need to customize image selection, use "return true" to intercept the HTML5 container.
                                return true;
                            }
    
                            @Override
                            public void openFileChooser(Activity activity, ValueCallback valueCallback, boolean b, APFileChooserParams apFileChooserParams) {
                                // Obtain the valid URI and send it to the frontend.
                                // The function must be called. Otherwise, the callback is not executed if you click it next time.
                                // 1. Open an activity through Intent, and access the system album or take photos.
                                // 2. Obtain the selected images.
                                // 3. Close the page and pass the images to the frontend through valueCallback.
                                valueCallback.onReceiveValue(xx);
                            }
                        });
    Important

    The valueCallback.onReceiveValue(xx) function must be called. Otherwise, the callback is not executed if you click it next time.

  2. Select the images for processing in the callback function of openFileChooser.

    1. Open an activity through Intent, and access the system album or take photos.

    2. Obtain the selected images.

    3. Close the activity page and pass the images to the frontend through valueCallback.

Solutions for reference

Solution 1

  1. Register a broadcast receiver in the openFileChooser method.

  2. In the openFileChooser method, go to the activity you created through Intent.

  3. Call the photo or image selection SDK of the system. Features such as image cropping can be added.

  4. Obtain the final selected images through the image selection activity, send a broadcast message to the broadcast listener of the callback function of openFileChooser, and close the activity page.

  5. Pass the images to the frontend through the valueCallback.onReceiveValue(xx) function of the WebView system.

Solution 2

  1. In the openFileChooser method, go to an activity through Intent and pass valueCallback to the activity.

  2. Call the photo or image selection SDK of the system. Features such as image cropping can be added.

  3. Pass the images to the frontend through the valueCallback.onReceiveValue(xx) function of the WebView system.

  4. Close the activity page.