CODEWITHSUNDEEP
javascriptfirebasefirebase-storage
Ruairí Fagan
Ruairí Fagan

Reputation: 1

Cannot assign firebase storage url to a usable variable

I am using this function to upload a file to firebase storage and assign the url to a variable but cannot seem to get it to work

If anybody is able to help I would greatly appreciate it. If you would like to see the context of this function it can be found on the signup page of covidchecker.ie

async function uploadImage(my_file) {
  const name = +new Date() + "-" + my_file.name;
  const metadata = {
    contentType: my_file.type
  };
  var pic_url = "";
  const task = ref.child(name).put(my_file, metadata);
  task.then(snapshot => snapshot.ref.getDownloadURL())
    .then(url => {
      pic_url = url;
      console.log(pic_url+ "   assign");
    })
    .catch(console.error);
  console.log(pic_url+ "  end");
  return pic_url;
}

The assignement console log registers the correct url but the end console log gives no value for pic_url.

Alternatively I tried this.

async function uploadImage(my_file) {
  const name = +new Date() + "-" + my_file.name;
  const metadata = {
    contentType: my_file.type
  };
  var pic_url = "";
  const task = ref.child(name).put(my_file, metadata);
  await task.then(snapshot => snapshot.ref.getDownloadURL()).then(url => {pic_url=url;console.log(pic_url)}).catch(console.error);
  return pic_url;
}

My results for the assignement console log remain the same while my results for the end console log become:

Promise {}proto: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: "https://firebasestorage.googleapis.com/v0/b/covid-checker-64324.appspot.com/o/1617622386065-gerald.jpg?alt=media&token=ac0de699-1012-4652-a979-941b685844a9"

This contains the url but I dont know how to extract it in a usable way

Upvotes: 0

Views: 67

Answers (2)

Gopi krishna
Gopi krishna

Reputation: 355

You can use the callback function to get your work done!!

function uploadImage(my_file,callBackFunc) {
      const name = +new Date() + "-" + my_file.name;
      const metadata = {
        contentType: my_file.type
      };
      var pic_url = "";
      const task = ref.child(name).put(my_file, metadata);
      task.then(snapshot => snapshot.ref.getDownloadURL())
        .then(url => {
          pic_url = url;
          console.log(pic_url+ "   assign");
          return callBackFunc(pic_url);
        })
        .catch(console.error);
      console.log(pic_url+ "  end");
     // return pic_url;
    };
    
uploadImage(xyz.txt,function(url)=>{
    // url variable contains the required value 
    // continue your code 
    });

Upvotes: 1

Vladimir Vladimirov
Vladimir Vladimirov

Reputation: 319

The problem is that you are using async function and what's happening is the second console log is executed before the promise from "getDownloadURL()" returns a result. Change your code like this:

async function uploadImage(my_file) {
  const name = +new Date() + "-" + my_file.name;
  const metadata = {
    contentType: my_file.type
  };
  return new Promise((resolve, reject) => {
    const task = ref.child(name).put(my_file, metadata);
    task.then(snapshot => snapshot.ref.getDownloadURL())
      .then(url => {
        resolve(url);
      })
      .catch(err => {
        console.error(err);
        reject(err);
      });
  });
}

And now you can call const picUrl = await uploadImage(file)

Upvotes: 1

Related Questions