Posts

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 : [email protected] 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 :

Tips to build magento2 mobile app using ionic framework

These days, the ways of developing an app have changed, as a result, it provides useful and user-centric apps to businesses and organizations for improving their business presence through a mobile app. These all changes are possible due to the presence of various cutting-edge tools, platforms, and frameworks. These all things have brought ease and convenience for developers and designers to create incredibly potential mobile apps.
The Ionic framework is one of the new entrances in the mobile app development platform. It has a front-end SDK built on AngularJS which is a top popular JavaScript library. Using this popular library Ionic application provides developers and companies a benefit of single development code across multiple mobile platforms. It has many other benefits like:

  1. It provides very beautiful UI. It has many default JS and CSS components which are clean, simple and functional.
  2. It focuses on native apps by running inside PhoneGap or Cordova to deploy an app natively.
  3. It has a most powerful CLI which helps developers to create, built, test and deploy apps onto any platform with just one command.

A few days back we get a chance to develop an app with the ionic framework and the most interesting part was to use Magento2 REST API to retrieve data from the server. Developing an app with the ionic framework and Magento2 Rest API was new to us but yes, it was an amazing thing to learn. We developed the app and it was a great experience to integrate the two amazing platforms in a mobile app. This article will help to learn how to build a Magento2 mobile app using the ionic framework.

Here are some important points to be noticed before starting the development on the front-end.

Magento2 Rest API Configurations: Test accessibility of the mobile API

This is the step which is followed by both the sides i.e. client side as well as server side. On the server side, we need to give permission for webservices and it is done by enabling Web API Security. For more information for server-side implementation please refer the link .

On the client side, you can make a direct call to some of the default Magento API like- product list, product details, product category etc. but for a customer-specific call like- customer authentication, cart, wishlist, checkout etc. needs to be called by passing authentication token in the header. To learn more about authentication token refer the blog.

Magento2 Server-side Configurations(CORS handling):  Setting of Headers in the .htaccess file.

This the most important step while making the call from javascript to Magento rest API.

CORS (Cross-Origin Resource Sharing) is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests. For CORS you need to add following headers at your server side .htaccess file:

      Access-Control-Allow-Origin: http://YourDomain.com
      Access-Control-Allow-Methods: POST, GET, OPTIONS, HEAD...and more
      Header always set Access-Control-Allow-Headers:DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type

Now, here is the detail explanation for developing a Magento2 mobile app using ionic framework

Steps to build Magento2 mobile app using ionic framework

1. Build Iconic project.

Now get ready to start your ionic app. Below are the steps to build an ionic app:

  1. The Ionic framework uses node.js as its utility, so to start first install the node.js utility:
     $ npm install -g ionic
  2.  Then, install the latest Cordova and Ionic command-line tools
    npm install -g cordova ionic
  3. Start a project by:
    ionic start <your app name> blank

Here starter blank means a project with no UI. It will create a blank project. Some of the other named templates starters

  • tabs (Default)
  • side menu
  • maps
  • salesforce
  • complex-list

The above command will create an ionic project with various files including www folder. This folder is the actual folder where your app further implementation resides. The index.html is your app file which runs your app and contains all the js and CSS file declaration.

For more details about ionic framework read its doc.

Now, rest things are to be done for front-end. Below a sample is described to show how to build a Magento2 mobile app using the ionic framework. In this sample, we will have the following functionality:

  1. User signup
  2. User Login
  3. Product Listing from Magento2 website.

Step 2. Create your UI

Create an .html file for Login e.g. login.html in your template folder. Define your view in this layout as your requirement. For more details about defining a layout, you can refer here. TEMPLATES is where your view files go. Your project does have a main index.html file in the WWW directory, but your app likely contains many template views that are added dynamically. Unlike your CSS and JS files, TEMPLATE files do not need to be mentioned in your index.html file.

Step 3. Update the app.js file for app’s states

Now define your app screens state in the app.js file. e.g:

     .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider,$provide) {
         $ionicConfigProvider.navBar.alignTitle('center');
         $stateProvider

        .state('login', {
             url: "/login",
             templateUrl: "templates/login.html",
             controller:"LoginCtrl"
        });

Step 4. Define a controller for the state:

controllers.js contains your Angular controllers for the states that require them. Define the logic here to control the state of your app. For example- In our sample, we defined LoginCtrl which defines the method which is to be called when user clicks on submit button.

.controller('LoginCtrl', function($scope, $state) {
   $scope.login = function(data) {
    // do what you want to do
   }
};

Step 5. Define a service file:

services.js is not always included in the starters, but it contains the custom Angular services your app may use, such as the one that calls out to a 3rd party API to get the information your app uses. So, it the real file from where we call the API for authentication and product listing. For example:

.service('AuthService', function($q, $http) { // call your API here to get informations for the app uses. }

Step 6. update your index.html file

Now, this is the final step to play with your ionic files. Update your index.html file with all the js and CSS file you created in your app. For example:

      <!-- your app's js -->
      <script src="js/app.js"></script>
      <script src="js/controllers.js"></script>
      <script src="js/services.js"></script>
      </head>

Sample Code

To get a complete code click here.

Conclusion

Above we described the steps to develop a Magento2 mobile app using ionic framework. The process is not only easy and interesting  but also make the  user interface attractive. The Ionic framework entrance in the market has proved to be very helpful for both the developer as well as for the customer because it is focused mainly on the look and feel, and UI interaction of your app. Above is the small sample to demonstrate the basic steps to build a Magento2 mobile app using ionic framework. For more information, you can contact us through our website. Enjoy Coding… 🙂

References

Ionic framework : Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

Magento2 REST API : Magento is an open-source e-commerce platform. Its REST API is used for building an e-commerce mobile apps.

Further Reading