How can I add Firebase Storage to my web app?

问题

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 user can upload images along with the article and title and user can also view the images related to post(store and retrieve feature) in real time.

Here is my html :

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

Here is my controller :

.controller('AddPostCtrl', ['$scope','$firebase','$firebaseObject', '$firebaseArray', function($scope,$firebase,$firebaseObject,$firebaseArray) {

$scope.AddPost = function() {
    var title = $scope.article.title;
    var post = $scope.article.post;
    var childRef = rootRef.child("Blog-One");
    var list = $firebaseArray(childRef);

    list.$add({
        title: title,
        post: post,
    }).then(function(childRef) {
        console.log(childRef);
    }, function(error) {
        console.log("Error:", error);
    });

}
}])

Can anyone help me with how to implement firebase storage, please? Thanks in advance.

回答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

来源：https://stackoverflow.com/questions/38421276/how-can-i-add-firebase-storage-to-my-web-app

标签

angularjs

firebase

angularfire

firebase-storage