In this tutorial, you will learn, how to upload an image to the server in Ionic 2 project using the transfer plugin. This example is created with the PHP server code. Later I will add other servers programming code. You need to setup the PHP server for this demo.

PHP Server:

Create a folder in the server and name it ionic. create a PHP file inside the ionic folder and paste the below code in that PHP file( here I just named the file to be uolpoad.php).

header('Access-Control-Allow-Origin: *');
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['file']['name']);
if (move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
    echo "Upload and move success";
} else {
echo $target_path;
    echo "There was an error uploading the file, please try again!";

The above code will capture the image and save the image in the uploads folder. So you must create a folder inside the ionic folder and name it as uploads. I am running the server on localhost. So the URL will be like this.


Now, you are going to 
1. Take the picture using the camera plugin
2. And upload the image to the server, which is taken by the camera.

So you need to install the camera and transfer plugin.

To create the Ionic 2 project, execute the below code in the terminal.

ionic start demoapp blank --v2

Then add the transfer plugin using the below command

cd demoapp
ionic plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/transfer

Add the camera plugin using the below command.

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

Open the app.module.ts file and import the camera and transfer plugin.

import { Camera, CameraOptions } from '@ionic-native/camera';
import { Transfer, FileUploadOptions, TransferObject } from '@ionic-native/transfer';

Then add the camera and transfer plugins to ngModule provider

providers: [Transfer,Camera,
{provide: ErrorHandler, useClass: IonicErrorHandler}

Now go home.html and create a button with click event.

<ion-button (click)="upload()" ion-button >Take Pic & Upload </ion-button>

Then go home.ts and import the camera and transfer plugin.

import { Camera, CameraOptions } from '@ionic-native/camera';
import { Transfer, FileUploadOptions, TransferObject } from '@ionic-native/transfer';

Create a reference for camera and transfer in the constructor.

constructor(private transfer: Transfer,private camera: Camera)

Then create a  upload function in the home.ts and write the action event.

       let options = {

           quality: 100
            }; => {
       // imageData is either a base64 encoded string or a file URI
       // If it's base64:

     const fileTransfer: TransferObject = this.transfer.create();

      let options1: FileUploadOptions = {
         fileKey: 'file',
         fileName: 'name.jpg',
         headers: {}

  fileTransfer.upload(imageData, 'http://localhost/ionic/upload.php', options1)
   .then((data) => {
     // success
   }, (err) => {
     // error



The above function will call the camera plugin. After taking the picture, the imageData variable will return the location of the image. Then it will call the http://localhost/ionic/upload.php to upload the image using the transfer class.

Add the Android platform to the project using

ionic platform add android

Generate APK file using the below command.

ionic build android

The terminal will display the generated APK location. Deploy the application on your Android phone and test it.

That's all.

Below are the software info, which is used to test this code.

System information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.2
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Installed platforms:
  android 6.1.2
  ios 4.1.1