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');
}
Please include everything needed to reproduce the problem. This code won’t even compile as posted.
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;
}