These days, a Web page customer service system is connected to the client to accept users’ feedback and suggestions. After the Android client integrates this customer service H5, the picture cannot be transmitted. After checking the integration effect of iOS colleague, you can upload pictures freely, and then open the H5 address with Android native browser. You can also open the album and upload pictures normally.

What??? Damn it, it’s cold!!

Looking at some blogs, webViews using Android do not support uploading files by default (need to override onShowFileChooser method). I’ll just roll up my sleeves and do it myself.

The browser kernel used in the project is Tencent X5 browser, then go to Tencent X5 technical documents to see if there is a way to achieve: TBS development guidelines, found that there is really

1. File selection

Method 1: File option: Set client callback

mWebView.setWebChromeClient(new WebChromeClient() { @Override public void openFileChooser( ValueCallback<Uri> uploadFile, String acceptType, String captureType) {// Save the corresponding ValuecallBack for selection and use // start the file selection window or custom file selection via startActivityForResult}});Copy the code

Multiple file selection: Set client callback

mWebView.setWebChromeClientExtension(new ProxyWebChromeClientExtension() { @Override public void openFileChooser( android.webkit.ValueCallback<Uri[]> uploadFile, String acceptType, String captureType) {// Save the corresponding ValuecallBack for selection and use // start the file selection window or custom file selection via startActivityForResult}});Copy the code

Method 2: Set the client callback (If you select one or more options, the interface will be callback).

mWebView.setWebChromeClient(new WebChromeClient() { @Override public boolean onShowFileChooser( IX5WebViewBase webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams FileChooserParams) {// Save the corresponding ValuecallBack for selection and use // startActivityForResult to launch the file selection window or custom file selection}});Copy the code

The user’s selection is then set to the corresponding ValueCallback when the activity returns

protected void onActivityResult(int requestCode, int resultCode, Intent data) {// Select if (resultCode == RESULT_OK) {// Set the onReceiveValue value for the ValueCallback selected for the file} else if (resultCode == RESULT_CANCELED) {// Set a null value for ValueCallback selected for the file}}Copy the code

2. Realize file radio selection

In the customized WebChromeClient of the project, rewrite the openFileChooser method and call the image selection component in the project. After the image selection is successful, the generated URI can be successfully uploaded using the valueCallback callback

@override public void openFileChooser(ValueCallback<Uri> ValueCallback, String s, String s1) {log. I (TAG, "openFileChooser: acceptType: " + s + " captureType: " + s1); // The uri generated by valueCallback can be successfully upload} // Many blog introduction, need to write a lot of Android various API compatible code, actually do not need. X5 in this method at the bottom of the system is actually compatible with the ability, do not need the upper developers to achieve. You only need to implement this one methodCopy the code

Effect:

3. Take an example

For simplicity, integrate a third party picture selection control

Github.com/thewyp/Avat…

Integration mode:

dependencies { ... The compile 'me. Thewyp: avatar: 1.0.4'}Copy the code

Usage:

New AvatarStudio.Builder(activityContext).NeedCrop (true) Default clipping.settextColor (color.blue).dimenabled (true)// Background whether dim defaults to true.setAspect (1, 1)// Clipping scale defaults to 1: SetOutput (200, 200)// Clipped size default 200*200. SetText (" Open camera ", "select from album ", Show (new avatarStudio.callback () {@override public void CallBack(String uri) {//uri is the image path Picasso.with(activityContext).load(new File(uri)).into(mImageView); }});Copy the code

To upload pictures on the Web

public class WebChromeClientImpl extends WebChromeClient { ...... @override public void openFileChooser(ValueCallback<Uri> ValueCallback, String s, String s1) {log. I (TAG, "openFileChooser: acceptType: " + s + " captureType: " + s1); New avatarStudio.builder (context).needCrop(true) Default clipping.settextColor (color.blue).dimenabled (true)// Background whether dim defaults to true.setAspect (1, 1)// Clipping scale defaults to 1: SetOutput (200, 200)// Clipped size default 200*200. SetText (" Open camera ", "select from album ", Show (new avatarStudio.callback () {@override public void CallBack(String uri) {//uri is the image path valueCallback.onReceiveValue(Uri.parse(uri)); // Use valueCallback to call back the generated Uri to the bottom layer of X5 for image upload}}); }... }Copy the code

At this point, the picture upload is realized. File implementation is the same, you can try it if you are interested