android Webview can't open a dialog window (for select a upload-file)

[lukaifu2002]

when a 'upload file' webpage embed in Android Webview, the webpage can't open a file-dialog window (for select a file to upload ).
But the webpage can be work very well in a safari browser when i don't used android webview. When i choose intentAndroid to called the webpage , it can also work very well.
the line below doesn't work, even though it can be seen.

[facebook-github-bot]

Hey lukaifu2002, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[satya164]

Hey. Android Wevbiew doesn't have a public API for this upto 4.3 (Though you could achieve it by using undocumented APIs). And it again breaks in 4.4.1 though 4.4.3. The API are different for most version of Android. I'm not sure it's worth it to add this to the core, since it's hacky, uses private APIs and not supported in all Android versions.

[jjshammas]

@satya164 what about a fix that at least resolves this for latest versions of Android (whichever have stable APIs for this)?

[dongyaQin]

I have faced the same problem. Actually we can devise our own WebView for android to support this. The key point is to overwrite openFileChooser method in WebChromeClient. You can check react-native-webview-file-upload for detail.

[satya164]

@jjshammas Feel free to give it a try, the code looks something like this,

...

        mWebView.setWebChromeClient(new WebChromeClient() {
            // For Android < 3.0
            @SuppressWarnings("unused")
            public void openFileChooser(ValueCallback<Uri> uploadMsg) {
                mUploadMessage = uploadMsg;

                Intent i = new Intent(Intent.ACTION_GET_CONTENT);

                i.addCategory(Intent.CATEGORY_OPENABLE);
                i.setType("*/*");

                startActivityForResult(Intent.createChooser(i, getString(R.string.select_file)), REQUEST_SELECT_FILE_LEGACY);

            }

            // For Android 3.0+
            @SuppressWarnings("unused")
            public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
                mUploadMessage = uploadMsg;

                Intent i = new Intent(Intent.ACTION_GET_CONTENT);

                i.addCategory(Intent.CATEGORY_OPENABLE);
                i.setType(acceptType);

                startActivityForResult(Intent.createChooser(i, getString(R.string.select_file)), REQUEST_SELECT_FILE_LEGACY);
            }

            // For Android 4.1+
            @SuppressWarnings("unused")
            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
                mUploadMessage = uploadMsg;

                Intent i = new Intent(Intent.ACTION_GET_CONTENT);

                i.addCategory(Intent.CATEGORY_OPENABLE);
                i.setType(acceptType);

                startActivityForResult(Intent.createChooser(i, getString(R.string.select_file)), REQUEST_SELECT_FILE_LEGACY);
            }

            // For Android 5.0+
            @SuppressLint("NewApi")
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                if (mUploadMessageArr != null) {
                    mUploadMessageArr.onReceiveValue(null);
                    mUploadMessageArr = null;
                }

                mUploadMessageArr = filePathCallback;

                Intent intent = fileChooserParams.createIntent();

                try {
                    startActivityForResult(intent, REQUEST_SELECT_FILE);
                } catch (ActivityNotFoundException e) {
                    mUploadMessageArr = null;

                    Toast.makeText(getActivity(), getString(R.string.file_chooser_error), Toast.LENGTH_LONG).show();

                    return false;
                }

                return true;
            }
        });

...

    @SuppressLint("NewApi")
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == REQUEST_SELECT_FILE_LEGACY) {
            if (mUploadMessage == null) return;

            Uri result = data == null || resultCode != Activity.RESULT_OK ? null : data.getData();

            mUploadMessage.onReceiveValue(result);
            mUploadMessage = null;
        }

        else if (requestCode == REQUEST_SELECT_FILE) {
            if (mUploadMessageArr == null) return;

            mUploadMessageArr.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, data));
            mUploadMessageArr = null;
        }

    }

[lucasferreira]

Hi @lukaifu2002 and other folks,

I implemented an experimental feature in my custom Webview module:
https://www.npmjs.com/package/react-native-webview-android

That can help you with file upload handle inside html forms ;)

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/android-webview-cant-open-a-dialog-window-for-select-a-upload-file

Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.

[farazs]

I have added a PR for this #12807

[Oblongmana]

Over the weekend, this became a major pain point on a deadline I was working on. @dongyaQin's work is excellent (and was an incredible help after a lot of time spent trying to decipher this issue), but was hard to plug into an existing project. As such, I've reworked the project into a react-native library that can be installed via NPM into existing projects in the usual way 3rd party libraries are incorporated into react-native projects.

For now, it still has the limitation of the original library - being only able to upload images - but the other information in this thread should provide a solid basis for expanding that to any files. Hoping to find some time next week to work on it, once I get through this current deadline!

It can be installed using npm install react-native-webview-file-upload-android --save, and then linking and importing it into your existing app, following the instructions in the repo at https://github.com/Oblongmana/react-native-webview-file-upload-android

[farazs]

@Oblongmana Please do take a look at my PR #12807! I'm trying to get this into react-native WebView so there is no need for a 3rd party library.

You can also try out my fork https://github.com/farazs/react-native/tree/webview_file_input