How to get the url of a saved image in firebase storage? (Urgent)

Ionic Framework ionic-v3
1

I am using a code to capture the camera image, then pass it to a variable, after which send it to the firebase database. But I need to link to the client’s registry, the url of this image, so that at the moment of the query when it is to display the list of clients, I bring the image of each client, that url I will save together in the client’s registry, however I am not getting the url.

I’ve done several tests, and it’s always returning me undefined to the photo url, could someone help me, show me another way to do it, or find the error of my code? This is the first time I use this camera function.

function that adds the client

  adicionarCliente() {
    this.cliente.clienteFinalizado = true;
    this.clienteProvider.adicionarCliente(this.cliente);
    //faz o upload da foto 
    this.uploadPhoto();
    //após upload concluído, a variável foto recebe a URL da foto no storage
    this.toastCadastro();
  }

function that captures camera photo

 takePicture(){
    this.camera.getPicture({
      quality : 100,
      destinationType : this.camera.DestinationType.DATA_URL,
      sourceType : this.camera.PictureSourceType.CAMERA,
      allowEdit : true,
      encodingType: this.camera.EncodingType.PNG,
      targetWidth: 1000,
      targetHeight: 1000,
      saveToPhotoAlbum: true
    }).then(imageData => {
       // imageData is a base64 encoded string
      this.base64Image = "data:image/jpeg;base64," + imageData;
      //this.Picture is passing the string to our DB
      this.Picture = imageData;
    }, error => {
      console.log("ERROR -> " + JSON.stringify(error));
    });
  }

image upload to firebase

  uploadPhoto(){
    this.myPhotosRef.child(this.generateUUID()).child('myPhoto.png')
      .putString(this.Picture, 'base64', { contentType: 'image/png' })
      .then((savedPicture) => {
        //aqui a myPhotoURL recebe a URL da foto
        this.myPhotoURL = savedPicture.downloadURL;
        console.log(this.myPhotoURL)
        this.cliente.foto = savedPicture.downloadURL;
        console.log(this.cliente.foto);
        console.log("SAVED " +savedPicture.downloadURL);
      });
  }
2

Which version of Ionic?

Which version of Angular?

Which version of angularfire2?

An example for ionic-angular 3.9.2, Angular 5.0.3, angularfire2 5.0.0-rc.6 and firebase 4.13.1:

.html:

<input type="file" accept="image/*;capture=camera" (change)="uploadFile($event)" class="custom-file-input">

.ts:

import { Component } from '@angular/core';

import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';

import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';

...

  public uploadFile(event) {

    this.loading.present();

    const file = event.target.files[0];
    const filePath = 'reviews' + '/' + this.beer.id + '/' + this.authService.getUserId();

    const task: AngularFireUploadTask = this.afStorage.upload(filePath, file);

    this.downloadURL = task.downloadURL();
    
    this.downloadURL.subscribe((url) => {

      // do something 

      this.loading.dismiss();

    });

  }

...

craft-beer-review
craft-beer-review.jpg750×1334 230 KB

1 Like
3

Your example more or less serves me, the problem is this. At the moment of the customer’s registration, either a photo of the camera is captured, or a photo of the gallery is chosen, and this photo has to go next to the client’s registration, ie the idea is to call the upload function of the firebase, and (as I currently do). But there is a variable of mine that is the variable client.foto. This variable should receive the URL for when loading the list, I upload the photo of each respective client.