Upload image to Firebase

[Farrah]

I am creating an application for gym members with each member assigned QR barcode to allow them to sign in. This is generated when they sign up for the app, with its own unique barcode assigned to each member. I have this somewhat working. I have the QR code generating with base64 when a user signs up but cant save this to the database.

So First of all the user signs up

Then this generates the QR code URL path to the console log

With this the output of the QR

But nothing is placed in the firebase database, So cant retrieve it for the member

My code is for signing up the typescript file

import {TabsPage} from '../tabs/tabs';
import {LoginPage} from '../login/login';
import { Component, Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

import { User } from '../../model/user';
import { UserService } from '../../service/user.service';
import {Md5} from 'ts-md5/dist/md5';

import firebase from 'firebase'

declare var require: any;
let QRCode = require('qrcode');


@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html'
})
export class SignupPage {

  @Input('qrc-value') value = 'https://www.techiediaries.com';
  @Input('qrc-version') version : '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16' | '17' | '18' | '19' | '20' | '21' | '22' | '23' | '24' | '25' | '26' | '27' | '28' | '29' | '30' | '31' | '32' | '33' | '34' | '35' | '36' | '37' | '38' | '39'|'40' | '' = '';

  @Input('qrc-errorCorrectionLevel') errorCorrectionLevel : 'L' | 'M' | 'Q' | 'H' = 'M';

  user:User=new User();
  error:string;
  constructor(public navCtrl: NavController,public storage:Storage,private userService:UserService){
  }
  signup(){
    // this.userService.pushUser(this.user);
    if(this.matchPassword(this.user)){
      console.log("Error :Don't metch password");
      this.error ="Don't metch between Password and confirm password";
    }else if(this.user.password.length<6){
      console.log("Error : passwrod short");
      this.error ="Password is too short (minimum is 6 characters).";
    }else if(this.checkValidEmail(this.user.email)){
      console.log("Error : Already has this email address ");
      this.error ="Already has this email address in out system";
    }else{
      this.deleteconfirm(this.user);
      var pass=Md5.hashStr(this.user.password);
      this.user.password=pass.toString();
      if(this.userService.pushUser(this.user)){
        this.storage.get('id').then((val) => {
          // this.user=db.list('User').valueChanges();
          // console.log("user id: ",val)
          if (val != this.user.id) {
            this.user.add_date = new Date().toDateString();
            console.log(this.user);
            this.toDataURL().then((v : string)=>{
              var base64parts = v.split(',');
              base64parts[0] = "base64:Qrcode.png";
              var imagedata =  base64parts.join("");
              var storageRef = firebase.storage().ref();
              var baseQR = storageRef.child('base64:Qrcode.png');
                this.navCtrl.push(TabsPage);
            }).catch((e)=>{
              console.error(e);
            })
          }
        }
      )}
      

    }
  }

  matchPassword(group): boolean {
    if (group.password==group.password2) {
      return false;
    }
    return true;
  }
  deleteconfirm(group):any{
    delete group.password2;
  }
  checkValidEmail(email):any{
    let result=this.userService.getUserByEmail(email);
    console.log(result);
    result.subscribe((k:User[])=>{
      if(k.length>0){
        return false;
      }else{
        return true;
      }
    });
  }
  toDataURL(){
    return new Promise((resolve,reject)=>{
      QRCode.toDataURL(this.value, { version : this.version , errorCorrectionLevel : this.errorCorrectionLevel } ,function (err, url) {
        if(err){
          console.error(err);
          reject(err);
        }
        else{
          console.log(url);
          resolve(url);
        }
      })
      });
      }
}

And then I created user-service file for the user

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { AngularFireDatabase } from 'angularfire2/database';

import { User } from ".././model/user";


@Injectable()
export class UserService {
    constructor(public db:AngularFireDatabase){
        
    }
    getUsers():Observable<User[]>{
        console.log("User Service : get users list");
        return this.db.list('User').valueChanges();;
    }
    getUser(id:number):Observable<User[]>{
        console.log("User Service : get user");
        return this.db.list('User',ref => ref.orderByChild('id').equalTo(id)).valueChanges();
    }
    getUserByEmail(email:string):Observable<User[]>{
        console.log("User Service : get user");
        return this.db.list('User',ref => ref.orderByChild('email').equalTo(email)).valueChanges();
    }
    pushUser(data:User):boolean{
        var aRef = this.db.list('User').push(null);
        console.log(aRef.key);
        data.id=aRef.key;
        aRef.set(data);      
        return true
    }

    pushQR(data:User):string{
        console.log("Student Service: Add new student information");
        var aRef = this.db.list('Students').push(null);
        console.log(aRef.key);
        data.qr_code=aRef.key;
        aRef.set(data);      
        return aRef.key
}

    pushQRimage(qr:User):string{
        console.log("Student Service: Add new student information");
        this.db.list('QR').push(qr.urlqr);
        return qr.urlqr
    }
    
    updatehUser(data:User):boolean{
        console.log(JSON.stringify(data));
        this.db.list('User').set(data.id+"",data);
        return true
    }
}

Any further Questions let me know, as this is for college project. Im new to these technologies but I have tried multiple methods but have had no luck. Any help would be much appreciated