I am not able to preview the photos taken by camera after pushing it to a array?

Question

i am pushing the image url into an array after that i am unable to preview the image.

I tried this for loop even then I am not able to do it ??

here I am pushing the whole URL into the array to display at the client side but I am not able to display it.

here is my mutiupload.ts

import { Component } from '@angular/core';
import { AlertController ,NavController, ActionSheetController, ToastController, Platform, LoadingController, Loading, IonicPage } from 'ionic-angular';

import { File } from '@ionic-native/file';
import { Transfer, TransferObject } from '@ionic-native/transfer';
import { FilePath } from '@ionic-native/file-path';
import { Camera } from '@ionic-native/camera';
import { RestProvider } from '/home/bb/Desktop/root/frontend/css_client/src/providers/rest/rest';

declare var cordova: any;
/**
 * Generated class for the MultiuploadPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-multiupload',
  templateUrl: 'multiupload.html',
})
export class MultiuploadPage {
  lastImage: string = null;
  loading: Loading;
  aImages    :  any;

  constructor(public  alertCtrl: AlertController ,public navCtrl: NavController, private camera: Camera, private transfer: Transfer, private file: File, private filePath: FilePath, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController,private auth: RestProvider) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MultiuploadPage');
  }
  public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
        {
          text: 'Use Camera',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

  public takePicture(sourceType) {
    // Create options for the Camera Dialog
    var options = {
      quality: 100,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };

    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {
      // Special handling for Android library
        var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
        var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
    }, (err) => {
      this.presentToast('Error while selecting image.');
    });
  }

// Create a new name for the image
private createFileName() {
  var d = new Date(),
  n = d.getTime(),
  newFileName =  n + ".jpg";
  return newFileName;
}

// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
  this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
    this.lastImage = newFileName;
  }, error => {
    this.presentToast('Error while storing file.');
  });
}

private presentToast(text) {
  let toast = this.toastCtrl.create({
    message: text,
    duration: 3000,
    position: 'top'
  });
  toast.present();
}

public pathForImage(img) {
  if (img === null) {
    return '';
  } else {
    var picture = cordova.file.dataDirectory + img;
    this.aImages.push({
        'image': picture
    });
    return picture; 
  }
}
} '

here is my html document

<!--
  Generated template for the MultiuploadPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="primary">
    <ion-title>multiupload</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <img src="{{pathForImage(lastImage)}}" style="width: 100%" [hidden]="lastImage === null">
 <button ion-button primary (click) ="presentActionSheet()" ><ion-icon name="camera">Select</ion-icon></button>
</ion-content>

the actual result should be an array of pictures, but I am not able to show picture for preview.

Answer 1

All I did was loop them into an array and add a for Loop

Answer 2

You can try this in my application is working

  presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Option',
      buttons: [
        {
          text: 'Open Gallery',
          handler: () => {
            this.takePhoto(0);
          }
        },
        {
          text: 'Take Picture',
          handler: () => {
            this.takePhoto(1);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }

  takePhoto(sourceType: number) {
    const options: CameraOptions = {
      quality: 25,
      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.base64Image = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      // Handle error
    });
  }

html

<ion-header>

          <ion-navbar color="primary">
            <ion-title>multiupload</ion-title>
          </ion-navbar>

        </ion-header>


        <ion-content padding>
            <img src={{base64Image}} >
         <button ion-button primary (click) ="presentActionSheet()" ><ion-icon name="camera">Select</ion-icon></button>
        </ion-content>