How can I add Firebase Storage to my web app?

Question

I have created a small blog app using angular firebase so that registered user can login and post a blog with article and title. I want to make use of firebase storage so that u

Answer 1

    
Create Post
    
        Title
            
    
    
        Article
            
     

Add these tags in your html

    
    
 

    Publish

In your controller

var uploader=document.getElementById('uploader'),
imageUrl,
fileButton=document.getElementById('fileButton');

fileButton.addEventListener('change', function(e) {

var file=e.target.files[0];

var storageRef=firebase.storage().ref('firebase').child(file.name);


var task=storageRef.put(file);

task.on('state_changed',

        function progress(snapshot){
                var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
                uploader.value=percentage;
        if (percentage==100){
     storageRef.getDownloadURL().then(function(url) {

Here you will get download url

imageUrl=url;
});

}).catch(function(error) {
// Uh-oh, an error occurred!
});
        }
        },
        function error(err){

        },
        function complete(){

        }

    );
 });

So you can allow all the users to post the article with an image. But keep one thing wait until the image uploaded in the storage, and then show the publish article button. To do that wait until the progress bar to get 100% then show the publish article button