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.

1. Install Cordova and Ionic

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:

1	npm install -g cordova ionic

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.

1	ionic info | grep "Version"

The output of the above command should look like this:

1 2 3

Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Node Version: v6.7.0




2. Create a New Project

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.

1	ionic start MyCameraApp blank --v2

At this point, you'll have a new directory called MyCameraApp. For the rest of this tutorial, we'll be working inside this directory.

1	cd MyCameraApp

3. Configure the Project

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

1	ionic platform add 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.

4. Install Ionic Plugins

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:

1	$ ionic plugin add --save cordova-plugin-camera $ npm install --save @ionic-native/camera

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.

1	$ ionic plugin add --save cordova-plugin-file $ npm install --save @ionic-native/file

In order to support Android devices running API level 23 or higher, we'll need the cordova.plugins.diagnostic plugin.

1	$ ionic plugin add --save cordova.plugins.diagnostic $ npm install --save @ionic-native/diagnostic

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:

1	$ ionic plugin add --save cordova-plugin-x-toast $ npm install --save @ionic-native/toast

Most importantly, the InAppBrowser

1	$ ionic plugin add --save cordova-plugin-inappbrowser $ npm install --save @ionic-native/in-app-browser

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:

1	Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK. Looked here: /Users/your-name/Library/Android/sdk/tools/templates/gradle/wrapper

You can fix it by:

1	$ cordova platform update android@6.2.2

reference: 

https://cordova.apache.org/announcements/2017/04/28/android-release.html

5. Implement InAppBrowser

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

1	ionic platform add 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.





5. Source Code

download