1

I'm trying to do a single image file + text fields upload with using Express 4.0 & multer 1.1.0. The image file itself correctly uploads to the right destination but I'm getting errors with the text field and response:

1) multer's req.body req.file objects are undefined if logged in console

2) res.json (and also res.send when tested) gets the error - TypeError: res.json is not a function at Object.handle)

multer is configured as follows using moment.js for dates, which is almost line-for-line from the multer Github documentation:

//standard express-generator server.js requires //passport.js implementation var multer = require('multer'); var storage = multer.diskStorage({ destination: function(req, file, cb){ cb(null, './public/photoUploads/' + moment().year() + moment().month()); }, filename: function(req, file, cb){ cb(null, req.user._id + moment().unix()); } }) var upload = multer({storage:storage}); require('./app/routes.js')(app, passport); //passport login routes - will eventually move app.post into this file app.post('/upload/photoData', upload.array('photo'), function(err, req, res) { var title = req.body.title; var description = req.body.description; var photoURL = req.file.filename; var jsonResponse = { "title": title, "description": description, "photoURL": photoURL } console.log(jsonResponse); res.json(jsonResponse); }); 

And here is the client-side form

 <form id="photo-data" method="post" action="/upload/photoData" enctype="multipart/form-data"> <div class="form-group"> <div class="modal-body"> <label for="image" class="control-label">Photo upload</label> <input type="file" class="form-control" name="photo" id="photo-main"> <label for="caption" class="control-label">Title:</label> <input type="text" class="form-control" name="title" id="photo-title"> <label for="long-text" class="control-label">Further description:</label> <input type="text" class="form-control" name="description" id="message-text"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button id="submit-photo" type="submit" class="btn btn-primary">Upload</button> </div> </div> </form> 

What am I doing wrong?

1 Answer 1

2

The signature for error handlers in Express is (err, req, res, next) (4 parameters), but Express sees less 4 than parameters in your handler so it assumes you're adding a normal route handler. The problem is that the order of your route handler parameters is wrong, it should just be (req, res). That will fix your res.json() error.

For your file field, you're currently telling multer you're expecting multiple files, so in that case you will need to check req.files instead of req.file. If you used upload.single('photo') instead, you could use req.file.

As for the non-file fields, make sure they are in fact submitted to the server by checking the network request for the form submission with your browser's developer tools.

Sign up to request clarification or add additional context in comments.

2 Comments

I should add that if the destination is defined as a function, it is necessary to make sure that this directory exists and if not, create it yourself.
Thanks! It works now. Fixing the req.file issue seems to have also fixed the req.body without further work - maybe the 2 are linked.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.