Firebase - 下载 URL（Firebase 存储）并将其保存在 Firebase 实时数据库中

Question

I have been trying to make something which just uploads a project to Firebase and all.. I cant really explain the project but what I am trying to do is:

1. Get the Firebase download URL when uploading the file.
2. Save it in the Firebase realtime database.

The code I have made for it is:

    let downloadURL;
    var filename = filenamechosen;
    var storageRef = firebase.storage().ref('/dav' + 'projects' + '/' + filename);
    var uploadTask = storageRef.put(selectedFile);

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

    }, function(error){

    }, function(){
        console.log(uploadTask.snapshot.ref.getDownloadURL());
    });
    };

function uploadOne(){
    let projectinf = document.getElementById("projectinfo").value;
    let name = document.getElementById("studentname").value;
    let cls = document.getElementById("cls").value;
    let email = document.getElementById("email").value;
    let projectlnk = downloadURL;
    let marks = document.getElementById("marks").value;
    let submitfrm = document.getElementById("submitfrm");
    let studentObj = {
        class: cls,
        email: email, 
        projectinfo: projectinf,
        projectlink: projectlnk,
        marks: "lol",
    }
    firebase.database().ref('/schools/dav/').child(`${name}`).set(studentObj).then().catch();
    console.log("done");
}

For getting the download url, I am getting something like this as a response:

jt {a: 0, i: undefined, c: jt, b: null, f: null, …}
a: 2
b: null
c: null
f: null
g: false
h: false
i: "https://firebasestorage.googleapis.com/v0/b/workspace-c7042.appspot.com/o/davproject.... //Continues

I have no idea how I can store it in the Firebase realtime database after getting the download URL:

<form action="uploadOne()">
<!--Some inputs as defined in the uploadOne function.-->
<button type="submit">SUBMIT</button>
</form>

This is almost the whole form I am using with that thing.

Answer 1

The getDownloadURL() method is asynchronous and returns a Promise which resolves with the downloadURL.

You therefore need to do something along these lines, using the then() method to wait that the Promise resolves:

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

---

It is not clear in your code how the two different parts are linked (which one calls which and how the file is selected), but one possibility is shown below:

let downloadURL;
var filename = filenamechosen;
var storageRef = firebase.storage().ref('/dav' + 'projects' + '/' + filename);
var uploadTask = storageRef.put(selectedFile);

uploadTask.on("state_changed",
null,  /// <- See https://firebase.google.com/docs/reference/js/firebase.storage.UploadTask#on
null,
function(){
   // Upload completed successfully, now we can get the download URL
    uploadTask.snapshot.ref.getDownloadURL()
    .then(function(downloadURL) {
        console.log('File available at', downloadURL);
        uploadOne(downloadURL);  // <- We call the uploadOne function passing the downloadURL as parameter
    });
});


function uploadOne(downloadURL){
    let projectinf = document.getElementById("projectinfo").value;
    let name = document.getElementById("studentname").value;
    let cls = document.getElementById("cls").value;
    let email = document.getElementById("email").value;
    let projectlnk = downloadURL;
    let marks = document.getElementById("marks").value;
    let submitfrm = document.getElementById("submitfrm");
    let studentObj = {
        class: cls,
        email: email, 
        projectinfo: projectinf,
        projectlink: projectlnk,
        marks: "lol",
    }
    firebase.database().ref('/schools/dav/').child(`${name}`).set(studentObj)
    .then(function() {
        console.log("done");
      })
      .catch(function(error) {
        console.log(error);
      });
}

This way it is the uploadTask that triggers the write to the database. You can adapt as necessary but in any case you will only get the value of the downloadURL in the callback function called when the Promise is fulfilled.