Angularfire Upload And Get Download Url

I'm trying to upload to my Storage bucket and then get the downloadURL to that uploaded file right after the upload is done. This was working previously but has since stopped for s

Solution 1:

Here is the way that I coded using angularfire 2 for the file uploading process.

publicselectedFile: FileList;
chooseFile(event) {
  this.selectedFile =  event.target.files;
}

uploadImage() {
  const file = this.selectedFile.item(0);
  const key = 'uploads/' + '/' + Math.floor(Math.random() * 1000000) + file.name;
  const upload = this.stroge.upload(key, file).then(() => {
    const ref = this.stroge.ref(key);
    const downloadURL = ref.getDownloadURL().subscribe(url => {
      this.Updateprofile(url);
    });   
  });
}

Solution 2:

Here is the part of the component I’m using in an Ionic app to upload up to 5 pics

uploadPicture(i) {
    let that=this;
    this.cameraPlugin.getPicture({
        quality: 100,
        destinationType: this.cameraPlugin.DestinationType.DATA_URL, 
        sourceType: this.cameraPlugin.PictureSourceType.CAMERA, 
        allowEdit: true,
        encodingType: this.cameraPlugin.EncodingType.PNG,
        //targetWidth: 500, //targetHeight: 500, saveToPhotoAlbum: true
      }).then(
      imageData => { 
        // Send the picture to Firebase Storageconst selfieRef = this.addPictureFile();
        var uploadTask = selfieRef.putString(imageData, 'base64', {contentType: 'image/png'});
        // Register three observers:// 1. 'state_changed' observer, called any time the state changes// 2. Error observer, called on failure// 3. Completion observer, called on successful completion
        that.uploading = true;
        that.picsCtrl[i].buttonDisabled = true;
        uploadTask.on('state_changed',   
          function(snapshot) {
            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploadedvar progress = (uploadTask.snapshot.bytesTransferred / uploadTask.snapshot.totalBytes) * 100;
            that.loadProgress = progress;
            switch (uploadTask.snapshot.state) {
              case firebase.storage.TaskState.PAUSED: // or 'paused'console.log('Upload is paused');
                break;
              case firebase.storage.TaskState.RUNNING: // or 'running'console.log('Upload is running');
                break;
            }
          }, function(error) {
          // Handle unsuccessful uploads
          }, function() {
            // Handle successful uploads on complete// For instance, get the download URL: https://firebasestorage.googleapis.com/...
            uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
              var imageURL = selfieRef.getDownloadURL().then(url => {
                that.uploading = false;
                that.picsCtrl[i].imgSrc = url;
                that.picsCtrl[i].buttonHidden = !that.picsCtrl[i].buttonHidden;
                that.picsCtrl[i].imgHidden = !that.picsCtrl[i].imgHidden;
                that.addPictureRef(url)
                  .then( keyRef => {
                    that.picsCtrl[i].imgKey = keyRef.key;
                    that.picsCtrl = that.createBucket(that.picsCtrl);
                  });
                });

            });
          });
        },
      error => {
      console.log(error);
      }
    );
  }

The relevants parts of the code are:

1. Using that instead of this when the stream is being uploaded
2. The use of several vars to show the progress bar and update the progress and the final func to get the url and do some stuff in the view
3. In my app there’s a component that handles the process of uploading and removing images.