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

<div flex-xs="100" flex-md="80" layout="row" layout-wrap >
    <h3 flex="100">Create Post</h3>
    <md-input-container flex="40" >
        <label>Title</label>
            <input  ng-model="article.title" type="text"   />
    </md-input-container>
    <md-input-container flex="100" >
        <label>Article</label>
            <textarea  ng-model="article.post" ></textarea>
    </md-input-container> 

Add these tags in your html

    <progress value="0" max="100" id="uploader"></progress>
    <input type="file" value="upload" id="fileButton"><br> 

    <md-button class="md-raised md-primary" ng-click="AddPost()" ng-disabled="!article.title || !article.post">Publish</md-button>

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