android app icon

Android WebView File upload Example Code

How to Enable File Upload in Android WebView

WebView is a powerful component in Android that allows developers to display web pages within an app. However, enabling file uploads in WebView requires some additional setup. This guide will walk you through the steps to make Android WebView support file uploads, including image and video files.

Note: the code below may need some editing and updation. If you aren't expert in android app development you can use our readymade webview app template that has file upload, file download, upload from camera etc and additional features including notification, navigation menus etc. You can get the code from this link Android webview app code

Step 1: Set Up WebView in Your Layout

Start by adding a WebView to your activity’s layout file:

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

Ensure the WebView is included in your activity's XML layout file. This will be the component used to display your web content.

Step 2: Enable JavaScript and File Access in WebView

In your activity class, enable JavaScript and allow file access for the WebView:

WebView webView = findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);

Enabling JavaScript is essential for many modern web pages to function correctly. Allowing file access ensures that the WebView can handle file uploads.

Step 3: Handle File Uploads with a Custom WebChromeClient

To handle file uploads, you need to implement a custom WebChromeClient and override the onShowFileChooser method:

webView.setWebChromeClient(new WebChromeClient() {
    // For Android 5.0+
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, 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;
            return false;
        }
        return true;
    }
});

This method will open the file chooser dialog when a user tries to upload a file. The selected file's URI is passed to the WebView to handle the upload.

Step 4: Handle the Result in onActivityResult

In your activity, override the onActivityResult method to receive the selected file:

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == FILECHOOSER_RESULTCODE) {
        if (uploadMessage == null) return;
        uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, data));
        uploadMessage = null;
    } else {
        super.onActivityResult(requestCode, resultCode, data);
    }
}

This method processes the file selected by the user and sends it back to the WebView for uploading.

Step 5: Handle Permissions (Optional)

If your app targets Android 6.0 (API level 23) or higher, you may need to request runtime permissions to access files on the user's device. Here's a basic example:

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

Ensure that your app has the necessary permissions to access the device's file system.

Step 6: Load Your Web Page

Finally, load the web page that contains the file upload form:

webView.loadUrl("https://example.com/upload");

This URL should point to a web page that includes a file input field, allowing users to select and upload files.

Conclusion

By following these steps, your Android WebView will support file uploads, enabling users to upload files directly from their mobile devices. This functionality is crucial for many modern web applications and enhances the user experience of your app.