How to upload a picture using feathers.js and multer?

Question

I'm working with feathers.js on the back-end and React on the front end and I need to implement a way to upload a picture. I'm using multer to handle the upload (and I've tried using busboy as well), but I can't seem to get the actual picture uploaded, or at least access it on req.file.

On the client side I have:

<form method="post" enctype="multipart/form-data" action="/picture/upload">
  <input type="file" name="avatar" />
  <input type="submit" value="Submit" />
</form>

In /src/middleware/index.js I have:

'use strict';

const uploadPicture = require('./uploadPicture');

const handler = require('feathers-errors/handler');
const notFound = require('./not-found-handler');
const logger = require('./logger');
var multer = require('multer');
const upload = multer({ dest: '../../client/img'});

module.exports = function() {
  // Add your custom middleware here. Remember, that
  // just like Express the order matters, so error
  // handling middleware should go last.

  const app = this;

  app.post('/picture/upload', upload.single('avatar'), uploadPicture(app));
  app.use(notFound());
  app.use(logger(app));
  app.use(handler());
};

This is src/middleware/uploadPicture.js:

'use strict';

module.exports = function(app) {
  return function(req, res, next) {
    console.log('req.file', req.file);
    console.log('req.body', req.body);

  };
};

req.file is always undefined, and req.body does contain the name of the image I uploaded.

I have tried using mutler and busboy on a basic Express project for testing, and it works perfectly, so that makes me think that maybe it has something to do with the middleware feathers.js uses and probably it changes some header or something, so multer can't append the file to the request object.

This is the order in which middleware is defined in src/app.js, which is where the server instance is run:

app.use(compress())
  .options('*', cors())
  .use(cors())
  .use('/', serveStatic( app.get('client') ))
  .use(bodyParser.json())
  .use(bodyParser.urlencoded({ extended: true }))
  .configure(hooks())
  .configure(rest())
  .configure(services)
  .configure(middleware);

Any thoughts on how to handle the image upload in this scenario?

Answer 1

I am using react, so enctype is not a supported HTML attribute. I should have used encType in my form. That fixed the problem.