How to work with the 'Camera' plugin to allow image upload when in a browser?

Question

I’m trying to implement a feature that allows me when in the browser, upload images, already on a mobile device, I will 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 in Vices. But I’m not able to implement to upload the image when in the browser. I can even check if the plugin Camera is installed with this section:

if (!Camera['installed']()) {
  alert('Unable to take photo');
  return false;
}

ts complete 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>

Answer 1

I managed to solve, it does not seem to be the best alternative, but it is working. The magic occurs basically within the method processWebImage.

See the full js:

import { Component, ViewChild } 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 {

  @ViewChild('fileInput') fileInput;

  title: string;
  photo: string;

  constructor(public navParams: NavParams, private actionSheetCtrl: ActionSheetController, private camera: Camera) {
    this.title = (navParams.get('action') == 'edit') ? 'Editar tarefa' : 'Criar tarefa';
  }

  attachPhoto() {
    if (!Camera['installed']()) {
      this.fileInput.nativeElement.click();
      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();
  }

  processWebImage(event) {
    let reader = new FileReader();
    reader.onload = (readerEvent) => {
      let imageData = (readerEvent.target as any).result;
      this.photo =  imageData;
    };

    reader.readAsDataURL(event.target.files[0]);
  }

  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;
    });
  }
}

In the HTML file:

<input type="file" #fileInput style="visibility: hidden; height: 0px" class="file-input" name="files[]" (change)="processWebImage($event)" accept="image/*">