How to image upload in ionic 2 using REST API - ionic2

Question

Without Ani transfer ionic 2 plugin
How to image upload in ionic 2 using REST API

Answer 1

public options: CameraOptions = {
enter code herequality: 100,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: true,
allowEdit:true,
correctOrientation:true,
targetWidth:300,
targetHeight:150
}
takePicture(options){
this.camera.getPicture(options).then((imageData) => {
console.log("imageData",imageData);
this.base64Image = imageData;
}, (err) => {
console.log(err);
});
}
add(){
var formData={
"title" : this.title,
"image" : this.base64Image,
"description" : this.description
}
if(this.formgroup.valid == true){
this.presentLoadingDefault();
this.service.add(formData).subscribe(
(data)=>{
console.log('data',data);
if(data.Code == 200){
this.presentToast(data.Message);
}else{`enter code here`
this.presentToast(data.Message);
}
this.loading.dismiss();
this.navCtrl.pop();
},
function (error){
console.log("error"+error)
});
}
}

Answer 2

Install the Cordova and Ionic Native plugins:
ionic cordova plugin add cordova-plugin-camera
npm install --save #ionic-native/camera
import {Camera, File, CameraOptions} from "ionic-native";
import { Myservice } from '../../providers/myservice';
export class HomePage {
captureDataUrl:any;
constructor(private Service:Myservice){}
openCamera() {
const cameraOptions: CameraOptions = {
targetHeight:150,
targetWidth:150,
allowEdit:true,
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
};
Camera.getPicture(cameraOptions).then((imageData) => {
this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
console.log("CaptureDataUrl:" + this.captureDataUrl);
this.upload();
}, (err) => {
});
}
this.upload(){
var profildata={
"name" :'HR PATEL',
"image" : this.base64Image
}
this.Service.getSaveImage(profildata).subscribe(
response => {
console.log("user add sucessfully");
},
err => {
console.log("err...."+err );
}
);
}
}
// call the myservice.ts
import { Http, Headers } from '#angular/http';
import {Observable} from 'rxjs/Observable';
#Injectable()
export class Myservice {
constructor(public http: Http){}
getSaveImage(profiledata): Observable<any>{
let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
return this.http.post("this api url",{data:profiledata},{headers:headers})
.map(data=> data.json());
}
}
}