grunt-connect middleware for testing file uploads - gruntjs

Question

How can I use grunt-connect with livereload to test uploading files to a server?
I'm using Yeoman and angular-seed for my project. One of the requirements is the ability to upload files to the server. Rather than setting up some external server for the project, I'd like to be able to keep everything contained in my current setup.
This solution adds middleware directly into Gruntfile.js for grunt-connect.
First it loads connect bodyParser which makes it easier to parse the uploaded file and form elements.
Next it sets an endpoint at '/upload'. This will be the route used during development and testing. This middleware returns a basic response with file properties.
Finally, the static routes that Yeoman automatically configures are appended to the list of middleware, which is returned back to grunt-connect.

Answer 1

Configuration property for adding a file upload handler to grunt-connect.
livereload: {
options: {
open: true,
base: [ '.tmp', '<%= yeoman.app %>' ],
middleware: function (connect, options) {
var middlewares = [
connect().use(connect.bodyParser({ uploadDir: '.tmp' })),
connect().use('/upload', function(req, res, next) {
/*
console.log(req.files); // files properties
console.log(req.body); // form properties
*/
res.setHeader('Content-Type', 'application/json');
// response with basic file stats
res.end(JSON.stringify({
'size': req.files.file.size,
'path' : req.files.file.path,
'other' : null }));
})
];
// add the static paths in options.base
options.base.forEach(function (base) {
middlewares.push(connect.static(base));
});
return middlewares;
}
}
}