title: Post JSON data in a HTML form
body: <p>I am using React on the front-end &amp; expressJs for server. I have some javascript <code>Object</code> data to send to the server. I <code>JSON.stringify</code> the data &amp; then store it in <code>&lt;textarea/&gt;</code> within the form &amp; I then I just post it. </p>
  
  <p>I am using the modules 'body-parser' for general api calls &amp; 'multer' for this multi-part form submission.</p>
  
  <p>Front-end code:</p>
  
  <pre><code>  &lt;div&gt;
      &lt;form action="/api/query" method="POST"&gt;
      {/* following textarea value looks like this:
      {"collection":"Contract","fieldSets":[{"field":"location","value":"London","andOr":""}],"responseType":"csv"} */}
        &lt;textarea defaultValue={JSON.stringify({ collection, fieldSets, responseType: 'csv' })} /&gt;
        &lt;Button type="submit"&gt;Download&lt;/Button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Back-end code:</p>
  
  <pre><code>const express = require('express');
  const bodyParser = require('body-parser');
  const multer = require('multer');
  const upload = multer();
  const app = express();
  app.set('port', 1111);
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  // for parsing multipart/form-data
  app.use(upload.array());
  app.use(express.static('public'));
  
  app.post('/query', (req, res) =&gt; {
     // here I keep getting reqbody as an empty {}
    console.log('reqbody is...', req.body);
  </code></pre>
  
  <p>However, I keep getting <code>{}</code> within <code>req.body</code> on the server.
  To clarify, the <code>/api/query</code> does work as I am able to <code>fetch</code> data from the url &amp; display on front-end. Its the form submission post which doesn't work.</p>
  
  <p>Thanks</p>