Store File Locally via Mongoose Crate with MEAN app - angularjs

Question

I'm having a bit of trouble setting up Mongoose Crate with my REST API using the MEAN stack. I'm pretty new to the whole thing so take it easy on me. I want to be able to upload a file to a local directory and then display that image within the controller. My route is setup as follows:
router.post('/posts', auth, function(req, res, next) {
var post = new Post(req.body);
post.author = req.payload.username;
// Mongoose Crate attach method
post.attach('image', req.files.image, function(err, post) {
if(err){ return next(err); }
post.save(function(err, post) {
if(err){ return next(err); }
res.json(post);
});
});
});
This is my Post model:
var mongoose = require('mongoose');
var crate = require('mongoose-crate');
var LocalFS = require('mongoose-crate-localfs');
var PostSchema = new mongoose.Schema({
title: String,
author: String
});
PostSchema.plugin(crate, {
storage: new LocalFS({
directory: './public/uploads'
}),
fields: {
image: {}
}
});
mongoose.model('Post', PostSchema);
And my controller:
app.controller('FeedCtrl', [
'$scope',
'posts',
function($scope, posts) {
$scope.posts = posts.posts;
$scope.addPost = function() {
posts.create({
title: $scope.title,
author: $scope.author,
image: $scope.image
});
$scope.title = '';
}
}
]);
And on the front end:
<form ng-submit="addPost()" method="post" enctype="multipart/form-data">
<div>
<input type="file" name="image" id="image">
</div>
<div class="message">
<input type="text" placeholder="Title" ng-model="title">
</div>
<button type="submit"></button>
</form>
<div>
<h3>{{post.title}}</h3>
<img src="{{post.image}}"/>
<span>posted by <a>{{post.author}}</a></span>
</div>
I read that by using Express you can get an uploaded file by just the input name and using req.files but I can’t seem to get that too work within the scope. If I’m reading that Mongoose Crate plugin correctly, it should save it to a directory of your choice (using the mongoose-crate-localfs plugin), by adding it to the “Post” model, and send back an array of the file meta data. I'm not able to retrieve any data after the post.
I feel like that scene in Seinfeld when they’re trying to write the script: https://www.youtube.com/watch?v=q9eDwHznMas. “Now we need something here…”. I just don’t know what it is. If someone can please take a look and please get me out of this funk that would be amazing. Thank you so much!

Answer 1

Express does not come with a multipart parser out of the box, req.files will be undefined if you are not using a multipart parsing middleware. A good multipart middleware to check out is multer, very easy to use. Also if you are planning making this an XHR request you will need to use the FormData api, and explicitly tell angular not to process the data. Im sure there are many good third party solutions but here is an article worth reading.