如何将 Firebase 存储添加到我的网络应用程序?

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.

<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

这篇关于如何将 Firebase 存储添加到我的网络应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！