index.html

<html>
    <head>
            <script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-app.js"></script>
            <script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-firestore.js"></script>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>

        <h1>Tops Promotion Products</h1>

        <div class="content">

            <form id="add-promo-product-form">
                    <h4>Add your image if you have one.</h4>
                    <div class="file-field input-field">
                        <div class="btn">
                        <span>File</span>
                        <input type="file" onchange="previewFile()">
                        </div>
                        <div class="file-path-wrapper">
                        <input class="file-path validate" type="text">
                        </div>
                    </div>
                    <p id="url"><b>Firebase Storage URL: </b></p>
                    <div class="col s12">
                        <img class="responsive-img" src="https://firebasestorage.googleapis.com/v0/b/img-storage-d41a0.appspot.com/o/images%2Ffirebase-storage.jpg?alt=media&token=394aeb7e-c10b-4b02-b7b2-144795ebf4a8"
                        id="preview" alt="Preview Image">
                    </div>
                    <input type="hidden" name="image" id="image" value="url">
                    <input type="text" name="product" placeholder="Product">
                    <input type="text" name="discription" placeholder="Discription">
                    <input type="text" name="discription_two" placeholder="Discription Two">
                    <input type="text" name="size" placeholder="Size">
                    <input type="text" name="product_two" placeholder="Product Two">
                    <input type="text" name="promo_number" placeholder="Promo Number">
                    <input type="text" name="department" placeholder="Department">
                    <input type="text" name="price" placeholder="Price">
                    <button>Add Promotion</button>
            </form>


            <ul id="promo-list"></ul>

        </div>

        <!-- TODO: Add SDKs for Firebase products that you want to use
            https://firebase.google.com/docs/web/setup#config-web-app -->


        <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase.js"></script>
        <script src="app.js"></script>
    </body>


    <script>
            var storageRef = firebase.storage().ref();
            var imagesRef = storageRef.child('images');
            function previewFile(){
            var file =document.querySelector('input[type=file]').files[0];
            var metadata = {
            contentType: 'image/jpeg'
            };
            var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);
            uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
            function(snapshot) {
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log('Upload is ' + progress + '% done');
                switch (snapshot.state)
                {
                case firebase.storage.TaskState.PAUSED:
                console.log('Upload is paused');
                break;
                case firebase.storage.TaskState.RUNNING:
                console.log('Upload is running');
                break;
                }
            },
            function(error) {
                console.log('Upload Error')
            },
            function() {
                var starsRef = storageRef.child('images/'+ file.name);
                starsRef.getDownloadURL().then(function(url) {
                document.querySelector('#preview').src=url;
                document.getElementById("image").value = url;
                var t=document.querySelector('p')
                t.innerHTML ='<b>Firebase Storage URL: </b>'+url
                }).catch(function(error) {
                console.log('Error Download File');
                });
            });
            }
        </script>
</html>