在栏中完成进度后，即使上传了文件，也不会生成 URL

Question

After file is uploaded and progress bar completes till 100 , URL isn't generated but if I remove code of progress, URL is generated

const handleChange = async (e) => {
    const file = e.target.files[0];
    //Path of the file.
    const storageRef = storage.ref("files/");
    const fileRef = storageRef.child(file.name);
    //Upload files in firebase storage.
    const time= await fileRef.put(file).on(
      "state_changed",
      (snapshot) => {
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setprogress(progress);
      }
    )
    //URL being generated
    setUrl(await fileRef.getDownloadURL());
    storage.refFromURL(url);
};

Answer 1

I overridden the functions of the on callback, and I'm generating the URL in the complete event, this behaviour is explained in more detail in this Firebase storage document

var storage = firebase.storage().ref("files/").child(file.name);

//upload file
var upload = storage.put(file);

//update progress bar
upload.on(
    "state_changed",
    function progress(snapshot) {
        var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        setprogress(percentage);
    },

    function error() {
        alert("error uploading file");
    },

    function complete() {
        // generate URL
        storage
            .getDownloadURL()
            .then(function(url) {
                console.log(url);
            })
            .catch(function(error) {
                console.log("error encountered");
            });
    });

Answer 2

As we had callback for setState in the class component for React, you have to do something like that

setUrl(await fileRef.getDownloadURL());

useEffect to watch that state change

useEffect(() => {
   storage.refFromURL(YOUR_URL_STATE);
}, [YOUR_URL_STATE]);