req.body is empty when using PUT method

[expressjs]

req.body is empty when using PUT method

[ages96]

Hi @dougwilson, i'm sorry wrong, i previously forgot that upload variable was not added to the parameters of router.put('/edit-product/:id', upload, function(req, res));, , as the upload is part of multer module, and this means no constrains on the module method-override, now already running smoothly and req.body is populated in my console. thank you , sorry already interfere with your time

[dougwilson]

Hi @ages96 that's very strange; you can even see in the source code for this module it doesn't touch the request, so have no idea why it would work for POST but not for PUT. Can you provide all the following so I can trace through the issue?

1. Version of Node.js
2. Version of this module and all others needed to reproduce
3. Full source code that demonstrates the issue. It doesn't need to be your exact source code if it's private, just trim it down so I can copy and paste it and run it as-is without modification
4. Full client side code I can run to reproduce the issue
5. Instructions on how to setup the app and reprouce the issue

Thanks!

[ages96]

Hi @dougwilson, thanks for responding, so for the problem is req.body is still empty when request is made via PUT method, here i use node v8.10.0 and method-override 2.3.10

And the following source code:

main.js

var bodyParser = require('body-parser');
// Express Framework
var express = require("express");
var app = express();
var methodOverride = require('method-override');
var adminRoute = require('./routes/admin');

app.use(bodyParser.urlencoded({extended: false}));//Parse application/xxx-www-url form encoded
app.use(bodyParser.json()); //parse application/json

//override with POST having ?_method=DELETE
app.use(methodOverride('_method'));

// Set Template Engine(EJS)
app.set('views', './views');
app.set('view engine', 'ejs');


app.use('/admin', adminRoute);

app.listen(secret.port, function(err){
	if(err) throw err;
	console.log("Go to http://localhost:" + secret.port + " in your browser");
});

routes/admin.js

var router = require("express").Router(); // Include Router
var bodyParser = require('body-parser');
var multer  = require('multer');

var path = require('path');
var storage = multer.diskStorage({
    destination: function(req, file, cb){
        cb(null, 'public/images/products/');
    },
    filename: function(req, file, cb){
        cb(null, Date.now() + path.extname(file.originalname));
    }
});
var upload = multer({ storage: storage }).single("image");

// Edit product
router.get('/edit-product/:id', function(req, res){
		var data = {_id: "sdRt453", title: "Title", description:"Descripton", images: [], price: 059499, qty: 9290};	
		res.render('admin/edit-product', {product: data});
});


router.put('/edit-product/:id', upload, function(req, res){
	console.log(req.body);
});

module.exports=router;

views/admin/edit-product.ejs

<!--product form-->
<div class="ui grid container">
<form class="ui form" method="post" action="/admin/edit-product/<%= product._id%>?_method=put" enctype="multipart/form-data" id="form-product">
  <h4 class="ui dividing header">Edit Product</h4>
  <div class="field">
    <label>Name</label>
        <input name="title" placeholder="Product Name" type="text" value="<%= product.title%>">
  </div>
  <div class="field">
    <label>Description</label>
        <input name="description" placeholder="Description" type="text" value="<%= product.description%>">
  </div>
  <div class="field">
      <label>Category</label>
      <select class="ui fluid dropdown" name="category">
        <option value="uncategorized">Uncategorized</option>
      </select>
  </div>
  <div class="field">
    <label>Price</label>
        <input name="price" placeholder="Price" type="text" value="<%= product.price%>">
  </div>
  <div class="field">
    <label>Image</label>
    <img class="ui image" width="80" height="80" src="/images/products/<%= product.images%>"/>
    <div class="ui button" id="btn-changeImg">Ubah Gambar</div>
    <input id="changeImg" name="image" type="file">
  </div>
  <div class="field">
    <label>Quantity</label>
        <input name="quantity" placeholder="Quantity" type="text" value="<%= product.qty%>">
  </div>
   <input class="ui button" type="submit" value="Edit Product"/>
          <a class="ui red button" href="/admin/products">Cancel</a>
</form>
</div>

[dougwilson]

Hi @ages96 so looking at your HTML, you have on your form enctype="multipart/form-data" and then looking at your Node.js server, I see you have a parser for application/json and for application/xxx-www-url but I don't see one for multipart/form-data. Where are you parsing multipart/form-data form types in your server?

[ages96]

hi @dougwilson, i'm sorry. I forgot something that body-parser not parse the form with multipart-form data. but i have handle with module multer , and just have to try it on my server, but it still is empty , why ?

[dougwilson]

I can try to help, but not sure why without seeing the running server. Can you provide all the following now with the multer added?

1. Version of Node.js
2. Version of this module and all others needed to reproduce
3. Full source code that demonstrates the issue. It doesn't need to be your exact source code if it's private, just trim it down so I can copy and paste it and run it as-is without modification
4. Full client side code I can run to reproduce the issue
5. Instructions on how to setup the app and reprouce the issue

Thanks!

[ages96]

this is version for multer 1.3.0 and to the source code can be seen in the source code before, i have update it on routes/admin.js

[dougwilson]

Thanks @ages96 . I'm trying to run your code to see what's going on, but I cannot get the initial page to load due to an error with the Items variable. Looks like the code for that is missing. Can you update the code example to something I can run or add the additional instructions for what I need to do to get the code running? Thanks so much!

[ages96]

Im sorry , I forget again something like Items, Items is schema mongoose database, and instead to my Items change with object data to be more simple var data = {_id:"sdRt453", title: "Title", description:"Descripton", images: [], price: 059499, qty: 9290}; and do not need to work with database mongoose, i have to update , can be checked again above script(routes/admin.js)

[dougwilson]

Hi @ages96 sorry I took a while to get back to you. Thanks for modifying the file. So I ran your server above, and after changing the secret.port to 3000 in main.js, I went to http://localhost:3000/admin/edit-product/42 and saw the form. I clicked on Edit Product and the following was logged to the server console:

{ title: 'Title',
  description: 'Descripton',
  category: 'uncategorized',
  price: '59499',
  quantity: '9290' }

My understanding from the source code is that this is req.body. So req.body seems populated in your example as far as I can tell, but maybe I'm not going about this correctly. Can you (a) verify on your end your example above is logging an empty req.body and if so (b) provide the specific instructions for how I can reproduce the empty body scenario with the above code.

Thanks!