CODEWITHSUNDEEP
firebasefirebase-storageangularfire2ionic4
Moblize IT
Moblize IT

Reputation: 1328

download url from firebase storage comes empty

I am using ionic 4 to upload the image from camera to the firebase storage. the upload goes fine but i am having hard time in getting the upload URL. my code looks like below:

async getFromCamera(){
    this.camera.getPicture({
      destinationType: this.camera.DestinationType.DATA_URL,
      quality: 25,
      correctOrientation: true,
        allowEdit:false
  }).then(async (imageData) => {
      var base64Image = "data:image/jpeg;base64," + imageData;
      this.uploadToFireStore(base64Image).then(
            (data) => console.log("done to firestore:"  + data),
            (err) => console.log("The error to upload is:::" + JSON.stringify(err))
          )
  }, (err) => {
      console.log("Error found is:" + err);
  });
  }

  uploadPercent
  downloadURL

  uploadToFireStore(imageData){
   return new Promise<any>((resolve, reject) => {
    let storageRef = this.storage.ref('/');
    let imageRef = storageRef.child('myimage')
    const task = imageRef.putString(imageData, 'data_url')

      console.log("Task is:::" + task)
       // observe percentage changes
    this.uploadPercent = task.percentageChanges();
    // get notified when the download URL is available
    task.snapshotChanges().pipe(
        finalize(() => {
                            this.downloadURL = imageRef.getDownloadURL() 
                            console.log("upload percent:" + JSON.stringify(this.uploadPercent))
                            console.log("download url is::" + JSON.stringify(this.downloadURL))
                      } 
                )
     )
    .subscribe()
  })
  }

The response i see is:

upload percent:{"_isScalar":false,"source":{"_isScalar":false},"operator":{}}
/tab1-tab1-module.js:629 download url is::{"_isScalar":false}

Upvotes: 2

Views: 620

Answers (1)

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

Firebase Storage lets you upload files, so you don't need to upload long base64 strings. Why do you still want to upload base64?

I am not familiar with what this.camera.getPicture method returns, but pretty sure it is a type of File. In that case:

}).then(imageData => {
    this.uploadToFireStore(imageData)

And

  uploadToFireStore(imageData){
    let storageRef = this.storage.ref('/');
    let imageRef = storageRef.child('myimage')
    const task = imageRef.upload(imageData, 'data_url')

    this.uploadPercent = task.percentageChanges();
    task.snapshotChanges().pipe(
        finalize( async () => {
          await this.downloadURL = imageRef.getDownloadURL().toPromise();
          console.log('this.downloadURL', this.downloadURL)

                      } 
                )
     )
    .subscribe()

Note that finalize takes an async function, because imageRef.getDownloadURL() returns an Observable, so as we only need one value from it and that is the only value we need of this stream, its looks cleaner to convert it to Promise.

Upvotes: 2

Related Questions