Firebase get Download URL after successful image upload to firebase storage

The API has changed. Use the following to get downloadURL

  snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log("File available at", downloadURL);

.put() function is returning a task, which can be used to track the uploading state.

For example you can listen for progress, error or completion like so:

onUploadImage () {
  const self = this
  const file = self.selectedFile
  if (!file) {
  self.isUploading = true
  const storageRef ='/images/' +
  const task = storageRef.put(file)
    function progress (snapshot) {
      self.status = 'UPLOADING...'
      self.percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
    function error () {
      self.status = 'FAILED TRY AGAIN!'
      self.isUploading = false

    function complete (event) {
      self.status = 'UPLOAD COMPLETED'
      self.isUploading = false
      storageRef.getDownloadURL().then((url) => { console.log(url) })

I think I have figured this out and it seems to be working, I realised I had to grab the downloadURL from the snapshot and assign that to this.image like so:

upload() {
    let storageRef =;
    let success = false;

    for (let selectedFile of [(<HTMLInputElement>document.getElementById('file')).files[0]]) {
      let router = this.router;
      let af =;
      let folder = this.folder;
      let path = `/${this.folder}/${}`;
      var iRef = storageRef.child(path);
      iRef.put(selectedFile).then((snapshot) => {

        // added this part which as grabbed the download url from the pushed snapshot
        this.image = snapshot.downloadURL;

        console.log('Uploaded a blob or file! Now storing the reference at', `/${this.folder}/images/`);
        af.list(`/${folder}/images/`).push({ path: path, filename: })

        console.log('DOWNLOAD URL IS ' + this.image)


I then ran my other function to add the URL to the database and it has gone in ok where expected!

So I have uploaded the image to the database, then using the snapshot from the put function, I then assigned my variable image:any to to the snapshot downloadURL like so:

this.image = snapshot.downloadURL;

I hope this can help someone else!

In 2019, I gained access to the url of a newly-saved file in firebase with the following function:

const uploadImage = async(uri) => {
  const response = await fetch(uri);
  const blob = await response.blob();
  // child arg specifies the name of the image in firebase
  const ref =;
  ref.put(blob).then(snapshot => {
    snapshot.ref.getDownloadURL().then(url => {
      console.log(' * new url', url)