Firebase Storage: Object does not exist

Question

I have the below code in my ReactJS file that is to upLoad a file to Firebase.

async function uploadFile() {
    console.log('starting UPLOAD ========');
    const blob = await fetch(mediaBlobUrl).then((r) => r.blob());
    const path = '/recordings/one';
    firebase
      .storage()
      .ref(path)
      .put(blob)
      .then(function (snapshot) {
        console.log('Uploaded complete');
      });
    console.log(`====> setURL is ${setURL} <=======`);
    storage.ref(path).getDownloadURL().then(setURL);
  }

The first time the button is clicked I get this error, but the the second time I click it then it works. Not sure what is going on?

Firebase Storage: Object 'recordings/one' does not exist. (storage/object-not-found)

I did notice when it fails this is the URL it is trying to hit (404). Notice the %2 instead of "/"

https://firebasestorage.googleapis.com/v0/b/buerce.appspot.com/o/recordings%2Fone 404

Answer 1

That's because your getDownloadURL method runs before actually uploading file. Both the put and getDownloadURL method returns promises. Your function is async so I'd recommend using await for both upload and getDownloadURL methods just like you are doing on fetch method.

async function uploadFile() {
    console.log('starting UPLOAD ========');
    const blob = await fetch(mediaBlobUrl).then((r) => r.blob());
    const path = '/recordings/one';
    await firebase.storage().ref(path).put(blob)

    const setURL = await storage.ref(path).getDownloadURL()
    console.log(`====> setURL is ${setURL} <=======`);
}