Javascript return variable from function and pass as parameter

Question

I got this function to insert image into firebase. What I am trying to do is select image, insert the image to firebase storage, get its downloadURL, then insert new record for account along with the downloadURL.

uploadAsByteArray = async (pickerResultAsByteArray, progressCallback) => {

  try {
var metadata = {
  contentType: 'image/jpeg',
};

let name = new Date().getTime() + "-media.jpg"
var storageRef = firebase.storage().ref();
var ref = storageRef.child('assets/' + name)
let uploadTask = ref.put(pickerResultAsByteArray, metadata)

uploadTask.on('state_changed', function (snapshot) {

  progressCallback && progressCallback(snapshot.bytesTransferred / snapshot.totalBytes)

  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');

}, function (error) {
  console.log("in _uploadAsByteArray ", error)
}, function () {
  var downloadURL = uploadTask.snapshot.downloadURL;
  //console.log("_uploadAsByteArray ", uploadTask.snapshot.downloadURL)
  console.log('URLLLLL ' + downloadURL);


  // save a reference to the image for listing purposes
  var ref = firebase.database().ref('assets');
  ref.push({
    'URL': downloadURL,
    //'thumb': _imageData['thumb'],
    'name': name,
    //'coords': _imageData['coords'],
    'owner': firebase.auth().currentUser && firebase.auth().currentUser.uid,
    'when': new Date().getTime()
  })
});
  return downloadURL;
  } catch (ee) {
console.log("when trying to load _uploadAsByteArray ", ee)
  }
}

I wanted to return variable downloadURL from this function and pass as parameter to my addNewAccount(), I am getting undefined.

addNewAccount = (downloadURL) => {
  console.log(downloadURL);
}

Answer 1

You need use call back, like you do with progressCallback and pass there your downloadURL :

Then here you will have your downloadURL in progress:

api.uploadAsByteArray(byteArray, (downloadURL) => {
  //console.log('downloadURL' + downloadURL)
  this.setState({ downloadURL: downloadURL})
})

After setState you will have a downloadURL in the components state and can pass it in addNewAccount :

<TouchableOpacity onPress={()=> this.addNewAccount(downloadURL)}>

Your function uploadAsByteArray:

uploadAsByteArray = async(pickerResultAsByteArray, progressCallback) => {

    try {
        var metadata = {
            contentType: 'image/jpeg',
        };

        let name = new Date().getTime() + "-media.jpg"
        var storageRef = firebase.storage().ref();
        var ref = storageRef.child('assets/' + name)
        let uploadTask = ref.put(pickerResultAsByteArray, metadata)

        uploadTask.on('state_changed', function(snapshot) {

            progressCallback && progressCallback(snapshot.bytesTransferred / snapshot.totalBytes)

            var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log('Upload is ' + progress + '% done');

        }, function(error) {
            console.log("in _uploadAsByteArray ", error)
        }, function() {
            var downloadURL = uploadTask.snapshot.downloadURL;
            //console.log("_uploadAsByteArray ", uploadTask.snapshot.downloadURL)
            console.log('URLLLLL ' + downloadURL);


            // save a reference to the image for listing purposes
            var ref = firebase.database().ref('assets');
            ref.push({
                'URL': downloadURL,
                //'thumb': _imageData['thumb'],
                'name': name,
                //'coords': _imageData['coords'],
                'owner': firebase.auth().currentUser && firebase.auth().currentUser.uid,
                'when': new Date().getTime()
            })
            progressCallback(downloadURL);
        });
    } catch (ee) {
        console.log("when trying to load _uploadAsByteArray ", ee)
    }
}