title: FormData() is sending value of input field but not sending the file from React to express server?
body: <p>I am using React and trying to send the form Input as well as a image file to a express server at a same time. I tried by appending these inputs data and file to the formData()  and sending it to backend through axios post request, but the problem is : The form input given by user is perfectly going to express server but file is undefined in backend</p>
  <p><strong>My JSX</strong></p>
  <pre><code>&lt;form onSubmit={sendData}&gt;
          &lt;input value={data.productName} onChange={handleChange} type=&quot;text&quot; name=&quot;productName&quot; /&gt;
          &lt;input value={data.productfeatures} onChange={handleChange} type=&quot;text&quot; name=&quot;productfeatures&quot; /&gt;
  
          &lt;input onChange={imgChnage} type=&quot;file&quot; name=&quot;test_files&quot; /&gt;
          &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p><strong>My function to handle input</strong></p>
  <pre><code>const [data, setData] = useState({
      productName: &quot;&quot;,
      productfeatures: &quot;&quot;,
    })
    const { productName, productfeatures } = data;
    const [imgHolder, setImgHolder] = useState();
    const handleChange = (evt) =&gt; {
      const value = evt.target.value;
      setData({
        ...data,
        [evt.target.name]: value
      });
    }
    const imgChnage = (e) =&gt; {
      setImgHolder(e.target.files[0]);
    };
    console.log(imgHolder);
    const sendData = async (e) =&gt; {
      e.preventDefault();
      const fd = new FormData();
      fd.append('name', productName);
      fd.append('features', productfeatures);
      fd.append('image', imgHolder);
      try {
        await axios
          .post(&quot;http://localhost:3001/pnit/v1/api/product&quot;, fd)
      } catch (error) {
        console.log(error);
      }
  </code></pre>
  <p><strong>All combined code</strong></p>
  <pre><code> import { useState } from &quot;react&quot;;
      import axios from &quot;axios&quot;;
      function App() {
        const [data, setData] = useState({
          productName: &quot;&quot;,
          productfeatures: &quot;&quot;,
        })
  
        const { productName, productfeatures } = data;
        const [imgHolder, setImgHolder] = useState();
  
        const handleChange = (evt) =&gt; {
          const value = evt.target.value;
          setData({
            ...data,
            [evt.target.name]: value
          });
        }
  
  
        const imgChnage = (e) =&gt; {
          setImgHolder(e.target.files[0]);
        };
        
        const sendData = async (e) =&gt; {
          e.preventDefault();
          const fd = new FormData();
          fd.append('name', productName);
          fd.append('features', productfeatures);
          fd.append('image', imgHolder);
          try {
            await axios
              .post(&quot;http://localhost:3001/pnit/v1/api/product&quot;, fd)
          } catch (error) {
            console.log(error);
          }
      
        }
      
        return (
          &lt;&gt;
            &lt;form onSubmit={sendData}&gt;
          &lt;input value={data.productName} onChange={handleChange} type=&quot;text&quot; name=&quot;productName&quot; /&gt;
          &lt;input value={data.productfeatures} onChange={handleChange} type=&quot;text&quot; name=&quot;productfeatures&quot; /&gt;
  
          &lt;input onChange={imgChnage} type=&quot;file&quot; name=&quot;test_files&quot; /&gt;
          &lt;button&gt;Submit&lt;/button&gt;
          &lt;/form&gt; 
          &lt;/&gt;
        );
      }
      
      export default App;
  </code></pre>