Photo gallery tutorial: Photo not being saved to gallery grid

Hi,
Searching for a related question was not showing a result, so asking here. I am trying the tutorial for the photo gallery app but when I click the (click)="addPhotoToGallery()" I get this in the console without the photo being added to the grid:

GET http://localhost:8100/undefined 404 (Not Found)

tab2.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Photo Gallery
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Photo Gallery</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let photo of photos; index as position">
        <ion-img [src]="photo.webviewPath"></ion-img>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="addPhotoToGallery()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</ion-content>

photo.service.ts:

import { Injectable } from '@angular/core';
import {
  Plugins, CameraResultType, Capacitor, FilesystemDirectory,
  CameraPhoto, CameraSource
} from '@capacitor/core';

const { Camera, Filesystem, Storage } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class PhotoService {
  public photos: Photo[] = [];

  constructor() { }

  public async addNewToGallery() {
    // Take a photo
    const capturedPhoto = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100
    });

    this.photos.unshift({
      filepath: "soon...",
      webviewPath: capturedPhoto.webPath
    });
  }

}

export interface Photo {
  filepath: string;
  webviewPath: string;
}

This is on a windows system. Camera opens and I capture a pic, with the green check mark to save it. After the the green check mark, we then see it is added to the array.

capture1892×923 143 KB

Then after selecting the green save after the capture we get the filled array of photos:

save capture1898×933 113 KB

The rest of the files are to the T from the tutorial. Any ideas?

Thanks

1 post - 1 participant

Read full topic