Skip to content

Instantly share code, notes, and snippets.

@vimal-verma

vimal-verma/index.html

Created June 18, 2021 10:04
Show Gist options
  • Save vimal-verma/b9e0cc92f89586c21974b19695dc4aef to your computer and use it in GitHub Desktop.
Save vimal-verma/b9e0cc92f89586c21974b19695dc4aef to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. vimal-verma created this gist Jun 18, 2021.
    67 changes: 67 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    <!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>