CODEWITHSUNDEEP
javascriptnode.jsexpressmulter
Alastair Ong
Alastair Ong

Reputation: 33

Express 4 Multer / req.body and res.json not defined

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?

Upvotes: 1

Views: 1956

Answers (1)

mscdex
mscdex

Reputation: 106696

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.

Upvotes: 2

Related Questions