Sending image to firebase with base64

I have run into a problem, I am building a QR sign-in system for a gym. I am using firebase to host the database, ionic for the application and base64 for generating the image. The image itself generates to console.log with URL address and when opened we can retrieve the QR code. What I am struggling to do is how to save this image to the database for each member. I have tried multiple methods online and cant get them to work. I’m new to this and would greatly appreciate any help. Hopely this is clear and any further explanation needed I will provide.


import { Component, Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

//page
import { StudentsPage } from '../students/students';

import { Student } from '../../model/student';
import { StudentService } from '../../service/student.service';

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


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

  @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';

  student: Student = new Student();
  error: string;
  constructor(public navCtrl: NavController, public storage: Storage, private studentService: StudentService) {
  }

  addstudent() {
    this.storage.get('user_id').then((val) => {
      // this.user=db.list('User').valueChanges();
      // console.log("user id: ",val)
      if (val != null) {
        this.student.add_date = new Date().toDateString();
        this.student.user_id = val;
        console.log(this.student);
        this.toDataURL().then((v : string)=>{
          var base64parts = v.split(',');
          base64parts[0] = "base64:Qrcode.png//";
          var imagedata =  base64parts.join("");
          this.student.qr_code = imagedata;
          this.value=this.studentService.pushQR(this.student)
          this.navCtrl.setRoot(StudentsPage);
        }).catch((e)=>{
          console.error(e);
        })
      }
    }
  )}

  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);
        }
      })
    });
  } 
}

Student-Service.ts This is wrong, it generates random code to database

pushQR(data:Student):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(data:Student):string{
    console.log("Student Service: Add new student information");
    var aRef = this.db.list('Students').push(data.urlqr);
    console.log(data.urlqr);
    data.urlqr=aRef.key;
    aRef.set(data);      
    return aRef.key
}

If I understand correctly, you’re trying to save an image to Firebase. If so, you have to save the image to firebase storage, not the database itself.

Once the image (your base 64 data) is stored in Firebase Storage, you save the image’s download url in the database itself.

Is that an accurate assessment of what you’re attempting?

Yes, sort of I want to save to Storage, but the QR code is generated automatically using base64 and to a local path ie data:image/png;base64,iVBORw… What I want to do is save the QR code generated in this path to the database, so then it can be retrieved each time for the member.

I see. I was doing something similar recently and struggled to find a way to do so. I ended up storing the actual value of the qr-code and just re-assigned that value to it on reboot. That spawned a new qr but with the same info embedded in it.

That approach was fine for my needs, but probably not in your case.

1 Like

I could do that as it is only the information I need anyway, have you your work on github or anything so I could take look at it too see if I could get way to work around it, thanks

It’s part of an app that I’m about to submit to the app stores so it’s not on Git at the moment. I’ll put together a sample of the original work and post it when I get a chance. May not be until tomorrow though.

Be much appreciated no worries if you cant :grinning: