Dropzone JS与Android Studio WebView兼容问题：点击无法唤起文件选择器

1. 配置WebView核心参数与文件选择回调 #

WebView默认不会处理文件上传请求，必须启用JavaScript并自定义WebChromeClient来拦截文件选择事件：

private ValueCallback<Uri[]> mFilePathCallback;
private static final int FILE_CHOOSER_REQUEST_CODE = 1001;

// 初始化WebView
WebView webView = findViewById(R.id.web_view);
WebSettings webSettings = webView.getSettings();

// 启用必要设置
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowContentAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);

// 设置WebChromeClient处理文件选择
webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        // 清空旧回调避免内存泄漏
        if (mFilePathCallback != null) {
            mFilePathCallback.onReceiveValue(null);
        }
        mFilePathCallback = filePathCallback;

        // 创建支持图片/视频选择的Intent
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.setType("image/*,video/*");
        intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
        
        try {
            startActivityForResult(Intent.createChooser(intent, "选择文件"), FILE_CHOOSER_REQUEST_CODE);
        } catch (ActivityNotFoundException e) {
            mFilePathCallback = null;
            return false;
        }
        return true;
    }
});

2. 处理文件选择结果返回 #

在Activity/Fragment中重写onActivityResult，将选中的文件Uri返回给WebView：

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    
    if (requestCode != FILE_CHOOSER_REQUEST_CODE || mFilePathCallback == null) {
        super.onActivityResult(requestCode, resultCode, data);
        return;
    }

    Uri[] results = null;
    if (resultCode == RESULT_OK) {
        if (data != null) {
            // 处理多选文件
            ClipData clipData = data.getClipData();
            if (clipData != null) {
                results = new Uri[clipData.getItemCount()];
                for (int i = 0; i < clipData.getItemCount(); i++) {
                    ClipData.Item item = clipData.getItemAt(i);
                    results[i] = item.getUri();
                }
            } 
            // 处理单选文件
            else if (data.getData() != null) {
                results = new Uri[]{data.getData()};
            }
        }
    }

    // 将结果传递给Dropzone
    mFilePathCallback.onReceiveValue(results);
    mFilePathCallback = null;
}

3. 调整Dropzone初始化配置 #

修改前端Dropzone代码，避免事件拦截冲突，确保点击能触发原生文件选择：

// 禁用自动发现，手动初始化避免冲突
Dropzone.autoDiscover = false;

// 初始化Dropzone
const myDropzone = new Dropzone("#my-dropzone", {
    url: "/your-upload-api", // 替换为你的上传接口
    clickable: true, // 确保上传区域可点击
    acceptedFiles: "image/*,video/*",
    init: function() {
        // 手动绑定点击事件，直接触发Dropzone内置的隐藏文件输入框
        this.element.addEventListener("click", () => {
            this.hiddenFileInput.click();
        });
    }
});

4. 适配Android 7.0+ 文件权限 #

若目标SDK版本≥24，需配置FileProvider避免Uri暴露问题：

1. 在AndroidManifest.xml中添加Provider配置：

<provider
    android:name="androidx.core.content.FileProvider"
    android:authorities="${applicationId}.fileprovider"
    android:exported="false"
    android:grantUriPermissions="true">
    <meta-data
        android:name="android.support.FILE_PROVIDER_PATHS"
        android:resource="@xml/file_paths" />
</provider>

2. 在res/xml目录下创建file_paths.xml：

<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <external-files-path name="upload_files" path="." />
    <external-cache-path name="cache_files" path="." />
</paths>

内容的提问来源于stack exchange，提问作者damii1