How to upload a File to Firebase using HTML and store user details with link in DATABASE

Question

I have a website in which I want to add a file upload option so how to do it using firebase in HTML
and I also want to collect user details while uploading files like users entering details and storing them in the database. How to do it.

I am a beginner in programming that’s why I am asking please help me who knows the answer if possible please provide the code

The code which I have tried :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
    Upload Files<br />
    <input type="file" id="files" multiple /><br /><br />
    <button id="send">Upload</button>
    <p id="uploading"></p>
    <progress value="0" max="100" id="progress"></progress>
    </div>
    
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>
    
    <!-- TODO: Add SDKs for Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-storage.js"></script>
    
    <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "******************",
        authDomain: "******************",
  projectId: ******************,
  storageBucket: ******************,
  messagingSenderId: "******************",
  appId: "******************",
  measurementId: "******************"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    
    </script>
    
    <script>
    var files = [];
    document.getElementById("files").addEventListener("change", function(e) {
      files = e.target.files;
      for (let i = 0; i < files.length; i++) {
        console.log(files[i]);
      }
    });
    
    document.getElementById("send").addEventListener("click", function() {
      //checks if files are selected
      if (files.length != 0) {
        //Loops through all the selected files
        for (let i = 0; i < files.length; i++) {
          //create a storage reference
          var storage = firebase.storage().ref(files[i].name);
    
          //upload file
          var upload = storage.put(files[i]);
    
          //update progress bar
          upload.on(
            "state_changed",
            function progress(snapshot) {
              var percentage =
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
              document.getElementById("progress").value = percentage;
            },
    
            function error() {
              alert("error uploading file");
            },
    
            function complete() {
              document.getElementById(
                "uploading"
              ).innerHTML += `${files[i].name} upoaded <br />`;
            }
          );
        }
      } else {
        alert("No file chosen");
      }
    });
    
    function getFileUrl(filename) {
      //create a storage reference
      var storage = firebase.storage().ref(filename);
    
      //get file url
      storage
        .getDownloadURL()
        .then(function(url) {
          console.log(url);
        })
        .catch(function(error) {
          console.log("error encountered");
        });
    }

    
    </script>
    </body>
</html>