Double item made when image and item are pushed at the same time


#1

When I click on addItem function, itemListRef pushes 2 items to firebase database and 1 image to firebase storage. When addItem function only had " this.itemListRef.push(item) ", only 1 item was created, which is what I’m expecting. This is my code. Can anyone help me get back to just 1 item and 1 image added after calling addItem function? Thanks in advance.

pictures = storage()

constructor(  ){
  this.itemListRef = this.afdb.list(`items`)
 } 

addItem(item: Item){
let key = this.itemListRef.push(item).key
this.pictures.ref(`images/`+key).putString(this.path, 'data_url');
}

#2

Please include everything needed to reproduce the problem. This code won’t even compile as posted.


#3

Ok this is the page.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Item } from '../../../models/item';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { storage } from 'firebase';

@IonicPage()
@Component({
  selector: 'page-add-item',
  templateUrl: 'add-item.html',
})
export class AddItemPage {

  authState: any = null;
  item = {} as Item;
  userId: string;
  itemListRef: AngularFireList<Item>;
  path: any;
  additem: FormGroup;
  pictures = storage()

  constructor(public navCtrl: NavController, private afAuth: AngularFireAuth, public afdb: AngularFireDatabase, public camera: Camera, private formBuilder:FormBuilder) {
      this.afAuth.authState.subscribe((user) => {
        if (user) this.userId = user.uid
      });
      this.itemListRef = this.afdb.list(`items`);
      
      this.additem = this.formBuilder.group({
        title: ['', Validators.required],
        description: ['', Validators.required],
        });
  }

  takePic(){
    let options : CameraOptions = {
      quality: 50,
      targetHeight: 200,
      targetWidth: 200,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true
    };
    this.camera.getPicture(options).then(imageData=>{
      this.path = `data:image/jpeg;base64,${imageData}`;
  }, err =>{
      alert("Error" + err);
    })

  }

  gallery(){
    let options : CameraOptions = {
      quality: 50,
      targetHeight: 200,
      targetWidth: 200,
      destinationType: this.camera.DestinationType.DATA_URL,
      sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true
    };
    this.camera.getPicture(options).then((imageData)=>{
        this.path = `data:image/jpeg;base64,${imageData}`;
      }, (err) =>{
        console.log(err);
      })

  }

  addItem(item: Item) {

    let key = this.itemListRef.push(item).key
    this.pictures.ref(`images/`+key).putString(this.path, 'data_url');
    this.navCtrl.pop();
  }
}

This is page.html:

<ion-header>

  <ion-navbar>
    <ion-title>Add Item</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form (ngSubmit)="addItem(item)" [formGroup]="additem">

    <ion-list>
      <ion-item>
        <ion-label style="font-weight: bold">Title</ion-label>
        <ion-input type="text" placeholder="Add Title" [(ngModel)]="item.title" formControlName="title"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label style="font-weight: bold">Description</ion-label>
        <ion-textarea style="max-width: 100%;" rows="6" type="text" placeholder="Add Description" [(ngModel)]="item.description"
          formControlName="description"></ion-textarea>
      </ion-item>

        <ion-item>
        <ion-row>
          <ion-col col-6>
            <img height="80" [src]="path" *ngIf="path" />
          </ion-col>

          <ion-col col-6>
            <ion-buttons right>
              <button ion-button icon-only color="royal" (click)="takePic()"><ion-icon name="camera"></ion-icon></button>OR
              <button ion-button icon-only color="royal" (click)="gallery()"><ion-icon name="images"></ion-icon></button>
            </ion-buttons>

          </ion-col>
        </ion-row>
      </ion-item>

    </ion-list>
    <button ion-button color="royal" type="submit" [disabled]="!additem.valid">Add New Item!</button>
  </form>
</ion-content>

This is item model page:

export interface Item {

  title: string;
    description: string;
     }