How to upload file in WebView?

On the Android platform, implementing file upload functionality within WebView requires additional setup and coding. In this guide, I'll walk you through implementing this feature in an Android application.

Step 1: Modify the Layout File

First, add a WebView component to your layout file. For example, in res/layout/activity_main.xml:

xml
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Step 2: Configure WebView

In your Activity or Fragment, configure WebView to support JavaScript and file uploads. Below is an example configuration:

java
public class MainActivity extends AppCompatActivity {
    private WebView webView;
    private ValueCallback<Uri[]> uploadMessage;
    private final static int FILECHOOSER_RESULTCODE=1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.setWebChromeClient(new WebChromeClient() {
            // For Android 5.0+
            public boolean onShowFileChooser(
                WebView webView, ValueCallback<Uri[]> filePathCallback,
                WebChromeClient.FileChooserParams fileChooserParams) {
                if (uploadMessage != null) {
                    uploadMessage.onReceiveValue(null);
                    uploadMessage = null;
                }

                uploadMessage = filePathCallback;

                Intent intent = fileChooserParams.createIntent();
                try {
                    startActivityForResult(intent, FILECHOOSER_RESULTCODE);
                } catch (ActivityNotFoundException e) {
                    uploadMessage = null;
                    Toast.makeText(MainActivity.this, "Cannot open file chooser", Toast.LENGTH_LONG).show();
                    return false;
                }
                return true;
            }
        });

        webView.loadUrl("http://example.com");
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent intent) {
        if (requestCode == FILECHOOSER_RESULTCODE) {
            if (uploadMessage == null)
                return;
            Uri[] results = null;
            if (resultCode == AppCompatActivity.RESULT_OK) {
                if (intent != null) {
                    String dataString = intent.getDataString();
                    if (dataString != null) {
                        results = new Uri[]{Uri.parse(dataString)};
                    }
                }
            }
            uploadMessage.onReceiveValue(results);
            uploadMessage = null;
        }
    }
}

In this example, we first set up a WebChromeClient and override the onShowFileChooser method. This is the key method for handling file selection, triggered when the user clicks the file upload button on the webpage. Within this method, we create an Intent for file selection and launch it.

The onActivityResult method receives the file selected by the user. Once the user selects a file, we pass the file's URI back to WebView via onReceiveValue.

Step 3: Handle Android Permissions

Starting from Android 6.0 (API level 23), users grant permissions at runtime. Therefore, you may also need to request storage permissions at runtime to allow file selection. Implement this by adding the following code in the onCreate method:

java
if (ContextCompat.checkSelfPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
    ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, 1);
}

Additionally, declare these permissions in your AndroidManifest.xml:

xml
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

This completes the implementation of file upload in Android WebView. Users can now click the file upload button within WebView, choose a file, and upload it successfully.