Angularfire用户可以将图像(附件)添加到他们的帖子

时间:2014-07-24 19:57:52

标签: angularjs file-upload firebase angularfire image-upload

对于像我这样的Angular / Angularfire / Firebase新手的人来说,并没有很多明确的文档,至少对于我一直在寻找的内容:

目前,我可以在Firebase后端创建和存储用户。用户可以创建帖子。现在它基于用户输入到创建帖子表单中的任何数据。这一切都很好,但我似乎找不到任何关于如何允许图像上传到该帖子的文档。

基本上:我希望用户能够使用他们的帖子上传像图像一样的文件(即带有上传图像的博客文章。)

POST控制器     'use strict';

app.controller('PostsCtrl', function ($scope, $location, Post) {
if ($location.path() === '/posts') {
    $scope.posts = Post.all;
}

$scope.post = {url: 'http://'};

$scope.submitPost = function () {
    Post.create($scope.post).then(function (ref) {
//            $location.path('/posts/' + ref.name()); //
    });
};

$scope.deletePost = function (postId) {
    Post.delete(postId);
};

$scope.upVotePost = function (postId, upVoted) {
    if (upVoted) {
        Post.clearVote(postId, upVoted);
    } else {
        Post.upVote(postId);
    }
};

$scope.downVotePost = function (postId, downVoted) {
    if (downVoted) {
        Post.clearVote(postId, !downVoted);
    } else {
        Post.downVote(postId);
    }
};

$scope.upVoted = function (post) {
    return Post.upVoted(post);
};

$scope.downVoted = function (post) {
    return Post.downVoted(post);
};

});

POST SERVICE

'use strict';

app.factory('Post',
function ($firebase, FIREBASE_URL, User) {
    var ref = new Firebase(FIREBASE_URL + 'posts');

    var posts = $firebase(ref);

    var Post = {
        all: posts,
        create: function (post) {
            if (User.signedIn()) {
                var user = User.getCurrentUser();

                post.owner = user.username;

                return posts.$add(post).then(function (ref) {
                    var postId = ref.name();

                    user.$child('posts').$child(postId).$set(postId);

                });
            }
        },
        find: function (postId) {
            return posts.$child(postId);
        },
        delete: function (postId) {
            if (User.signedIn()) {
                var post = Post.find(postId);

                post.$on('loaded', function () {
                    var user = User.findByUsername(post.owner);

                    posts.$remove(postId).then(function () {
                        user.$child('posts').$remove(postId);
                    });
                });
            }
        },
        addComment: function (postId, comment) {
            if (User.signedIn()) {
                var user = User.getCurrentUser();

                comment.username = user.username;
                comment.postId = postId;

                posts.$child(postId).$child('comments').$add(comment).then(function (ref)   
{
                    user.$child('comments').$child(ref.name()).$set({id: ref.name(), 
postId: postId});
                });
            }
        },
        deleteComment: function (post, comment, commentId) {
            if (User.signedIn()) {
                var user = User.findByUsername(comment.username);

                post.$child('comments').$remove(commentId).then(function () {
                    user.$child('comments').$remove(commentId);
                });
            }
        },
        upVote: function (postId) {
            if (User.signedIn()) {
                var user = User.getCurrentUser();
                var post = posts.$child(postId);


post.$child('upvotes').$child(user.username).$set(user.username).then(function () {
                    user.$child('upvotes').$child(postId).$set(postId);
                    post.$child('downvotes').$remove(user.username);
                    user.$child('downvotes').$remove(postId);

                    post.$child('score').$transaction(function (score) {
                        if (!score) {
                            return 1;
                        }

                        return score + 1;
                    });
                });
            }
        },
        downVote: function (postId) {
            if (User.signedIn()) {
                var user = User.getCurrentUser();
                var post = posts.$child(postId);


post.$child('downvotes').$child(user.username).$set(user.username).then(function () {
                    user.$child('downvotes').$child(postId).$set(postId);
                    post.$child('upvotes').$remove(user.username);
                    user.$child('upvotes').$remove(postId);

                    post.$child('score').$transaction(function (score) {
                        if (score === undefined || score === null) {
                            return -1;
                        }

                        return score - 1;
                    });
                });
            }
        },
        clearVote: function (postId, upVoted) {
            if (User.signedIn()) {
                var user = User.getCurrentUser();
                var username = user.username;
                var post = posts.$child(postId);

                post.$child('upvotes').$remove(username);
                post.$child('downvotes').$remove(username);
                user.$child('upvotes').$remove(postId);
                user.$child('downvotes').$remove(postId);
                post.$child('score').$transaction(function (score) {
                    if (upVoted) {
                        return score - 1;
                    } else {
                        return score + 1;
                    }
                });
            }
        },
        upVoted: function (post) {
            if (User.signedIn() && post.upvotes) {
                return post.upvotes.hasOwnProperty(User.getCurrentUser().username);
            }
        },
        downVoted: function (post) {
            if (User.signedIn() && post.downvotes) {
                return post.downvotes.hasOwnProperty(User.getCurrentUser().username);
            }
        }
    };

    return Post;
});

创建帖子

        <form class="" role="search" ng-submit="submitPost()" enctype="multipart/form-data">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Word" ng-model="post.category">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Title" ng-model="post.title">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Link" ng-model="post.url">
            </div>
            <div class="form-group">
                <textarea id="post-content" class="form-control" rows="6" placeholder="Content" ng-model="post.content"></textarea>
            </div>
            <button type="submit" class="btn btn-default is-form-toggle">Submit</button>
            <input type="button" value="Cancel" class="btn btn-default is-form-toggle is-close-button" />
        </form>

我还需要其他什么吗?正如您所看到的,表单还没有文件输入,因为我不知道此时要使用什么。希望有人能够至少引导我朝着正确的方向前进!非常感谢。

0 个答案:

没有答案