问题
Not a lot of clear documentation for a person as new to Angular/Angularfire/Firebase as me, at least for what I've been looking for:
Currently, I users can be created and stored in my Firebase backend. Users can create a post. Right now it's based on any of the data the user inputs into the create post form. This works all fine and dandy, but I can't seem to find any documentation on how to allow something like image uploading into that post as well.
Basically: I want a user to be able to upload a file like an image with their post, (i.e. a blog article with uploaded images.)
POST CONTROLLER '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;
});
CREATE POST FORM
<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>
Anything else needed from me? As you can see, the form doesn't have a file input yet because I'm just not sure what to use at this point. Hopefully someone can at the least steer me in the right direction! Thanks a lot.
来源：https://stackoverflow.com/questions/24942861/angularfire-user-who-can-add-images-attachments-to-their-post