Monday, May 08, 2017

Ionic 2 how to implement InAppBrowser with file upload via Camera / Gallery part 1

Goal: Wrap http://www.plupload.com/examples into InAppBrowser with support of take photo from camera or upload from gallery. Implement in Ionic 2.

Both Ionic and Cordova are available as NPM modules, so the easiest way to install them is to use the npmcommand. Here's how you can install both of them globally:
Once the installation is complete, type in the following to make sure that the Ionic command-line interface, or CLI for short, is configured correctly.
The output of the above command should look like this:

Ionic's CLI makes it very easy for you to create new Ionic 2 projects with all the required configuration files and boilerplate code. It also offers several starter templates to choose from. For now, let us simply create a project using the blank starter template.
At this point, you'll have a new directory called MyCameraApp. For the rest of this tutorial, we'll be working inside this directory.

By default, an Ionic 2 project isn't configured to target any mobile platform. Here's how you add support for Android:

Make sure you installed 'Android Studio', otherwise you can not run on emulator and you will get 'ANDROID_HOME' missing error when you try to run your APP.

Our camera app needs access to the device's camera and file system, both of which are native resources. If you're familiar with Cordova, you might be aware that hybrid applications usually interact with such resources through plugins. Although you can use a Cordova plugin directly in an Ionic 2 project, it is much easier to use its Ionic Native wrapper instead.
 Here's how you can add it to your project:
We'll, of course, have to save the pictures we take on external storage media, such as SD cards. To do so, we'll use the cordova-plugin-file plugin.
In order to support Android devices running API level 23 or higher, we'll need the cordova.plugins.diagnostic plugin.
There is one problem here, 'diagnostic' requires 'ionic-native/core' later than 3.6.0, So you need edit 'package.json',change to "@ionic-native/core": "^3.6.0", then run 'npm update'
To show message to user:

Most importantly, the InAppBrowser


Important Tip: you may need add the plugin to 'src/app/app.modules.ts' as provider to be able to use the plugin. Not only import the plugin.

If you got error like:

You can fix it by:

By default, an Ionic 2 project isn't configured to target any mobile platform. Here's how you add support for Android:

Make sure you installed 'Android Studio', otherwise you can not run on emulator and you will get 'ANDROID_HOME' missing error when you try to run your APP.