How to fix html5 file input issue in cordova android app?

Have you got an issue while using Cordova html5 file input i.e not able to access the camera or gallery on your android mobile app or click on the file input is unresponsive? If the answer is yes, then congrats you are not alone we faced this issue too ;-) . Recently we were working on one of our client's project and they wanted to launch their responsive website on Android and IOS platform. As their site is mobile responsive so we decided to use Apache Cordova platform to launch the mobile app for it.

As a dream, all things were perfectly on iOS platform till we hit the wall for Android platform. The issue was related to opening the Camera or Library option to upload the picture for user's profile. It seems a very trial issue and we thought we could resolve it in few hours but we got to know how complex it is when tried to solve it :-( .

Issue Description

On the website, we used html5 file input i.e <input type="file"> to open the link to choose the photo from the phone gallery or Camera. Normally at this point, a dialogue would open allowing the user to select an image from the gallery or take a picture on iOS app but clicking on the "Choose Photo" button does nothing on the android app. We were clueless as there were no errors on log cat or chrome's console.

What was the exact issue?

This is an external issue in the Google Chromium web view. Also, InAppBrowser default plugin this functionality doesn't exist. More information about this is available here:

Tried multiple ways to resolve the issue

First, we thought that issue would we easy, may be some permission is missing because it was working fine on IOS. So we changed the permission for all but the result was same as before i.e no action. Then we explored more find the following options to solve the issue:

We used CrossWalk one of the popular solutions suggested by many developers. Basically, it is replaced the android webview with Crosswalk, but we got no answer :-( .
We also tried Cocoon. It provides all the tool and services to create and configure our project. We build our app over there and run it on our mobile. It provides a various Webview engine to use, powered by Cordova such as Canvas+ a webview especially for a game, Webview a simple engine to run our app and the Webview+ which is a webview engine designed their own. So we ran the app on the Webview and again the result was same without any change. Next, we used Webview+ to run the app and surprisingly it works. As Webview+ was their own plugin for webview engine so we tried to implement their WebView+ plugin, but we were not able to do same because it has been discontinued and there is such solution for the latest version.

So, above is all about the issue and its possible solution provided.

Possible Solutions

There is no verified and complete solution available. Below are some suggested solutions for the issue:

We can use the camera plugin provided by InAppBrowser, but in that case, we have to do some changes on server side. We will need to add cordova plugin on the server side.
Change the code of InAppBrowser class in your project. In this class, you need to do some implementation as suggested in the link.

Actually, above change in code will help you to access the file on mobile greater than 4.4 version of Android. It isn't really a Cordova InAppBrowser bug, it's an android 4.4 webview bug. The problem is cordova is based on the webview, so the bug extends to cordova. The Android 4.4 won't include a browser and the device vendor will have to create their own browser using a webview, that means any browser apart from chrome will have <input type="file"> working.

It affects chrome and any other app that tries to get an URL from the result of an Intent.ACTION_GET_CONTENT ). The problem here is the file picker isn't even called because overwriting openFileChooser private function isn't working on android 4.4 the file picker is opened on chrome and chromium, but not on the webview. The Cordova html5 input type file button does generate an onClick event. So anyone can write js to respond to that event. But the value property of the type="file" input object in the DOM is read-only in js, so it isn't possible to set it from js. That is for security reasons.

So if it is not possible to set the input value via js, and openFileChooser() in CordovaChromeClient no longer gets called so we never get a handle to the ValueCallback. This means there is no way for Cordova html5 input type file to be used to store the result from a picker.

Conclusion

Apparently, html5 file input i.e <input type=file> is even causing trouble for android phone because InAppBrowser doesn't support the functionality . There's no quick fix we can use, so will need to hack it up if we want to make it work. Likely it will be fixed in a future update.

If you liked this post and want to know more or need any help, please contact us at : info@ipragmatech.com and WhatsApp no : +91-880 046 6470 or visit us at: ipragmatech.com

References

CrossWalk : The Crosswalk Project is an HTML application runtime, built on open source foundations, which extends the web platform with new capabilities.

Cocoon: The Cocoon framework provides all the tool and services to create and configure a native HTML5 app and games with a simple workflow and all the power of Cordova.

Github : This link will help you to make changes in your code with explanation.

For further reading :

Posted from my blog with : https://www.ipragmatech.com/fix-html5-file-input-cordova-android/