CODEWITHSUNDEEP
androidnativescriptnativescript-vue
butaminas
butaminas

Reputation: 840

Making file input filed work on Android nativescript vue webview

Complete Solution for VUE on Playground.

I'm creating an app with NativeScript Vue and I am using webview as a main component. In the loaded website there is a file input field to capture camera input.

It works great on iOS devices but on Android, the input field doesn't work.

Has anyone know a solution to make file input fields to work on Android webview?

I use tns-android version: 6.1.1

Update 1

Which platform am I using?

More info about the stack:

"dependencies": {

"@nota/nativescript-webview-ext": "^5.4.1",

"@nstudio/nativescript-camera-plus": "^2.2.6",

"axios": "^0.19.0",

"js-cookie": "^2.2.1",

"nativescript-camera": "^4.5.0",

"nativescript-geolocation": "^5.1.0",

"nativescript-plugin-firebase": "^9.1.1",

"nativescript-theme-core": "^1.0.6",

"nativescript-ui-sidedrawer": "^7.0.2",

"nativescript-vue": "~2.4.0",

"net": "^1.0.2",

"rxjs": "^6.5.3",

"tns-core-modules": "~6.1.0",

"vuex": "^3.1.1"

},

"devDependencies": {

"@babel/core": "~7.1.0",

"@babel/preset-env": "~7.1.0",

"babel-loader": "~8.0.0",

"nativescript-dev-webpack": "~1.2.0",

"nativescript-vue-template-compiler": "~2.4.0",

"node-sass": "^4.7.1",

"vue-loader": "~15.4.0"

},

In my Vue file (where the webview is loaded), I load the website like this:

<webview    @loaded="onWebViewLoaded" :src="webViewSrc"
                     :builtInZoomControls="false"
                     :displayZoomControls="false"
                     :debugMode="true"
/>

And then in the onWebViewLoaded I try doing this: let myWebChromeClientClass = androidVm.webkit.WebChromeClient.extend({

                    onShowFileChooser: function (WebView, ValueCallback, FileChooserParams) {
                        // FileChooserParams.createIntent()

                        camera.takePicture() // Using nativescript-camera
                            .then(function (imageAsset) {
                                console.log("Result is an image asset instance");
                                var image = new Image();
                                image.src = imageAsset;
                                console.log(image)
                            }).catch(function (err) {
                            console.log("Error -> " + err.message);
                        });

                        return false
                    }
                });
                let myWebChromeClient = new myWebChromeClientClass();
                webView.android.setWebChromeClient(myWebChromeClient);

Currently, I'm struggling to make the nativescript-camera behave after taking the picture (always returns 'canceled') but I know there is a way to show the native file input selection using FileChooserParams but I can't make this work either as the closest solution that I've found on the net is for Java and not really sure how to transform this to Javascript / Vue.

Any more ideas?

Upvotes: 2

Views: 1666

Answers (1)

Manoj
Manoj

Reputation: 21908

You will have to extend android.webkit.WebChromeClient and assign the same on nativeView.

You will have to implement onShowFileChooser method, handle the selection of file using Intent or something.

Upvotes: 3

Related Questions