search

Notalib / nativescript-webview-ext

Nativescript plugin with extended WebView functionality
Apache License 2.0
76 stars 37 forks source link

WebChromeClient extend to take picture on file input field #50

Open butaminas opened 4 years ago

butaminas commented 4 years ago

Which platform(s) does your issue occur on?

Please, provide the following version numbers that your issue occurs with:

"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" },

I'm using nativescript vue and loading a website in the app using nativescript-webview-ext. In the loaded website I have a file input field that suppose to open the camera (works on regular browser and iOS but doesn't on Android). After doing some research, I realized that I need to extend the WebChromeClient and do something on the onShowFileChooser event to manually replicate the file input response.

To do this, 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.

Does anyone else tried this and have any tips on how can I make this work? The end goal is to take a picture and return ir to the file input field that is in the webview.

Thanks in advance.