vimal-verma/index.html

## index.html
<!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>
    <h1>Hi there</h1>
    <progress value="0" max="100" id="uploder"></progress>
    <input type="file" value="upload" id="fileButton">


    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-storage.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "Your_key",
    authDomain: "name.firebaseapp.com",
    projectId: "name",
    storageBucket: "name.appspot.com",
    messagingSenderId: "Your_id",
    appId: "1:Your_id:web:Your_id",
    measurementId: "G-Your_id"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  // geting elements
  var uploder = document.getElementById('uploder')
  var filebutton = document.getElementById('fileButton')


  filebutton.addEventListener('change',function(e) {
    var file = e.target.files[0];

    var storeRef = firebase.storage().ref('folder_name/'+ file.name);

    var task = storeRef.put(file);

    task.on('state_changed', function progress(snapshot) {
        var percentage = (snapshot.bytesTransferred / snapshot.totalBytes)* 100;
        uploder.value = percentage;
        console.log('Uploaded', snapshot.totalBytes, 'bytes.');
        console.log(snapshot.metadata);
        var url = snapshot.ref.getDownloadURL().then((downloadURL) => {
        console.log('File available at', downloadURL);
        });
    })

    function error(err){
        console.log(err);
    }

    function complete(){

    }
  });
</script>
</body>
</html>
	<!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>
	<h1>Hi there</h1>
	<progress value="0" max="100" id="uploder"></progress>
	<input type="file" value="upload" id="fileButton">


	<!-- The core Firebase JS SDK is always required and must be listed first -->
	<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-storage.js"></script>

	<script>
	// Your web app's Firebase configuration
	// For Firebase JS SDK v7.20.0 and later, measurementId is optional
	var firebaseConfig = {
	apiKey: "Your_key",
	authDomain: "name.firebaseapp.com",
	projectId: "name",
	storageBucket: "name.appspot.com",
	messagingSenderId: "Your_id",
	appId: "1:Your_id:web:Your_id",
	measurementId: "G-Your_id"
	};
	// Initialize Firebase
	firebase.initializeApp(firebaseConfig);

	// geting elements
	var uploder = document.getElementById('uploder')
	var filebutton = document.getElementById('fileButton')



	filebutton.addEventListener('change',function(e) {
	var file = e.target.files[0];

	var storeRef = firebase.storage().ref('folder_name/'+ file.name);

	var task = storeRef.put(file);

	task.on('state_changed', function progress(snapshot) {
	var percentage = (snapshot.bytesTransferred / snapshot.totalBytes)* 100;
	uploder.value = percentage;
	console.log('Uploaded', snapshot.totalBytes, 'bytes.');
	console.log(snapshot.metadata);
	var url = snapshot.ref.getDownloadURL().then((downloadURL) => {
	console.log('File available at', downloadURL);
	});
	})

	function error(err){
	console.log(err);
	}

	function complete(){

	}
	});
	</script>
	</body>
	</html>