I'm trying to implement a feature that allows me when in the browser, uploading images, already on a mobile device, I'll have the options to take a photo or choose an image from the gallery.
Taking a photo or choosing from the gallery is already working on the devices. But I am not able to implement to perform the image upload when in the browser. I can even check if the Camera
plugin is installed with this excerpt:
if (!Camera['installed']()) {
alert('Unable to take photo');
return false;
}
Complete ts file:
import { Component } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { ActionSheetController, IonicPage, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-add-edit-task',
templateUrl: 'add-edit-task.html',
})
export class AddEditTaskPage {
title: string;
photo: string;
constructor(public navParams: NavParams, public actionSheetCtrl: ActionSheetController, private camera: Camera) {
this.title = (navParams.get('action') == 'edit') ? 'Editar tarefa' : 'Criar tarefa';
}
attachPhoto() {
if (!Camera['installed']()) {
alert('Unable to take photo');
return false;
}
const actionSheet = this.actionSheetCtrl.create({
buttons: [
{
text: 'Tirar foto',
handler: () => {
this.cameraOrLibraryPhoto(this.camera.PictureSourceType.CAMERA, this.camera.MediaType.PICTURE);
}
},{
text: 'Buscar na galeria',
handler: () => {
this.cameraOrLibraryPhoto(this.camera.PictureSourceType.PHOTOLIBRARY, this.camera.MediaType.PICTURE);
}
},{
text: 'Cancelar',
role: 'cancel'
}
]
});
actionSheet.present();
}
cameraOrLibraryPhoto(source: number = 1, mediaType: number = 0) {
const options: CameraOptions = {
quality: 100,
mediaType: mediaType,
sourceType: source,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG
};
this.camera.getPicture(options).then((imageData) => {
this.photo = 'data:image/jpeg;base64,' + imageData;
});
}
}
HTML file:
<ion-header>
<ion-navbar>
<ion-title>{{ title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label stacked>Título</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Nota</ion-label>
<ion-textarea rows="4"></ion-textarea>
</ion-item>
</ion-list>
<button ion-button item-end icon-start color="light" (click)="attachPhoto()">
<ion-icon name="camera"></ion-icon>
Anexar imagem
</button>
<ion-card *ngIf="photo">
<h2>Previsualização</h2>
<img src="{{photo}}">
</ion-card>
<div padding>
<button ion-button block>Salvar</button>
</div>
</ion-content>