title: How to submit image along with fields to node js
body: <p>I am trying to send form with multiple images so that i can save to mysql data base
  my form is like</p>
  <pre><code>import React from 'react';
  import axios from 'axios'
  export const  Imageupload = ()=&gt;
  {
      const[File,setImageFiles] = React.useState(null)
      const[firstName,setFirstName] = React.useState(null)
      const[lastName,setLastName] = React.useState(null)
      const upload = ()=&gt;
      {
          if (File) {
              console.log(File)
              var formData = new FormData();
              formData.append('firstname', firstName);
              formData.append('lastname', lastName);
              formData.append('fileslist', File);
              var options = {
                  firstname:firstName,
                  lastname:lastName,
                  fileslist:File,
              }
              try {
                  const res =  axios.post('/students/imgUpload', formData);
      
              }
              catch (err) {
                  if (err) {
                      console.log(err);
                  }
              }
          } else {
              console.log(&quot;Please enter all fields&quot;);
          }
      }
      return(
          &lt;&gt;
          &lt;form encType=&quot;multipart/form-data&quot;&gt;
          &lt;input name=&quot;firstName&quot;  onChange={(e)=&gt;setFirstName(e.target.value)} placeholder=&quot;enter first name&quot;/&gt;
          &lt;input name=&quot;lastName&quot;  onChange={(e)=&gt;setLastName(e.target.value)} placeholder=&quot;enter last name&quot;/&gt;
          &lt;input type=&quot;file&quot; name=&quot;ourimage&quot;  onChange={(e)=&gt;setImageFiles(e.target.files[0])}/&gt;
          &lt;button onClick={upload}  type=&quot;button&quot;&gt;submit&lt;/button&gt;
          &lt;/form&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>but when I log the req on node js i got this response in which files are in req.body but it should be in req.files
  however, req.files is empty</p>
  <p><a href="https://i.stack.imgur.com/RNjQX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RNjQX.png" alt="req logged on node js controller" /></a></p>
  <p>I am using multer and body-parser in following way</p>
  <pre><code>const bodyParser = require('body-parser')
  var multer = require('multer');
  var upload = multer();
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({ extended: true }))
  app.use(upload.array('fileslist', 1)); 
  app.use(express.static('public'));
  app.use('/students',students)
  </code></pre>
  <p>My router and controller looks like</p>
  <pre><code>router.post(&quot;/create-product&quot;,products.store)
  </code></pre>
  <p>//controller</p>
  <pre><code>exports.uploadForm = (req,res)=&gt;
  {
      var file = req
      console.log( file)
      
  }
  </code></pre>
  <p>Note: I have tried inserting them separately such that inserting fields into mysql separately and image separately using formidable but i am failing to insert it completely as in one go</p>