(I’ve got say it in advance, sorry for my bad english) below is my typescript code in which is working perfectly. The takephoto method opens the device gallary and let the user choose one of pictures stored in the device and the uploadFile method tranfers the data image to the restfull api that I’m developing in asp.net core :
export class SelecionarAvatarPage {
imgrc:any =‘assets/imgs/blank-profile-picture-973460_640-300x300.png’;
imgurl: any =’ ';
imgname: string;
constructor(public navCtrl: NavController, private transfer: FileTransfer, public loadingCtrl: LoadingController, private camera: Camera, public navParams: NavParams, private platform: Platform, public toastCtrl: ToastController) {
}
ionViewDidLoad() {
console.log(‘ionViewDidLoad SelecionarAvatarPage’);
}
takePhoto(sourceType:number) {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType:sourceType,
}
this.camera.getPicture(options).then((imageData) => {
this.imgname = imageData;
let base64Image = ‘data:image/jpeg;base64,’ + imageData;
this.imgrc = base64Image;
this.imgurl = imageData;
}, (err) => {
// Handle error
});
}
presentToast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: ‘bottom’
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
uploadFile() {
let loader = this.loadingCtrl.create({
content: “Uploading…”
});
loader.present();
const fileTransfer: FileTransferObject = this.transfer.create();
loader.dismiss();
let options: FileUploadOptions = {
fileKey: ‘ionicfile’,
fileName: ‘ionicfile’,
chunkedMode: false,
mimeType: “image/jpeg”,
headers: {}
}
fileTransfer.upload(this.imgurl, 'http://192.168.0.000:5000/api/image', options)
.then((data) => {
console.log(data);
this.presentToast("Imagem foi enviada");
}, (err) => {
console.log(err);
loader.dismiss();
});
}