title: Req.file undefined when uploading file with React to Multer/Express with Material UI component but Postman works
body: <p>After endless searching I must post this question. Why am I getting req.file undefined when attempting to upload a file via React/Material UI to Multer/Express when it's working with Postman? The &quot;fieldname&quot; is the same across my components, I am now trying to use formData but still no success.</p>
  <p>Client side</p>
  <pre><code>  selectFile = (event) =&gt; {
      this.setState({ image: event.target.files[0] }, () =&gt; {
        this.handleIncludePhoto();
      });
    };
    handleIncludePhoto = async () =&gt; {
      const { image } = this.state;
      const headers = { &quot;Content-Type&quot;: `multipart/form-data` };
      const data = new FormData();
      data.append(&quot;file&quot;, image);
      await api
        .upload(
          {
            data,
          },
          { headers }
        )
        .then((res) =&gt; {
          console.log(res);
        });
    };
  ...
  
  // material ui upload button code
  // https://mui.com/components/buttons/
  
  ...
          &lt;label htmlFor=&quot;contained-button-file&quot;&gt;
            &lt;Input
              accept=&quot;image/*&quot;
              id=&quot;contained-button-file&quot;
              multiple={false}
              type=&quot;file&quot;
              name=&quot;file&quot;
              onChange={this.selectFile}
            /&gt;
            &lt;Button
              variant=&quot;contained&quot;
              component=&quot;span&quot;
              endIcon={&lt;PhotoCamera /&gt;}
            &gt;
              upload
            &lt;/Button&gt;
          &lt;/label&gt;
  </code></pre>
  <p>Middleware</p>
  <pre><code>//this works with Postman
  let storage = multer.diskStorage({
    destination: (req, file, cb) =&gt; {
      console.log(&quot;file&quot;, file);
      cb(null, __basedir + &quot;/../client/public/media/&quot;);
    },
    filename: (req, file, cb) =&gt; {
      cb(null, file.originalname);
    },
  });
  
  let uploadFile = multer({
    storage: storage,
    limits: { fileSize: maxSize },
  }).single(&quot;file&quot;);
  
  let uploadFileMiddleware = util.promisify(uploadFile);
  module.exports = uploadFileMiddleware;
  </code></pre>
  <p>Controller</p>
  <pre><code>// Works with Postman
  const upload = async (req, res) =&gt; {
    try {
      await uploadFile(req, res);
  
      console.log(&quot;req.file&quot;, req.file);
      if (req.file == undefined) {
        return res.status(400).send({ message: &quot;Please upload a file!&quot; });
      }
  
      res.status(200).send({
        message: &quot;Uploaded the file successfully: &quot; + req.file.originalname,
      });
    } catch (err) {
      console.log(err);
  
      if (err.code == &quot;LIMIT_FILE_SIZE&quot;) {
        return res.status(500).send({
          message: &quot;File size cannot be larger than 2MB!&quot;,
        });
      }
  
      res.status(500).send({
        message: `Could not upload the file: ${req.file}. ${err}`,
      });
    }
  };
  </code></pre>
  <p>Client console error</p>
  <pre><code>xhr.js:210 POST http://localhost:3004/api/studio 400 (Bad Request)
  createError.js:16 Uncaught (in promise) Error: Request failed with status code 400
      at createError (createError.js:16)
      at settle (settle.js:17)
      at XMLHttpRequest.onloadend (xhr.js:66)
  </code></pre>
  <p>Postman success
  <img src="https://i.imgur.com/7b2TkuM.png" alt="Postman works" /></p>
  <p><strong>EDIT</strong>
  Changing this solved my issue</p>
  <p>old:</p>
  <pre><code>    await api
        .upload(
          {
            data,
          },
          { headers }
        )
  </code></pre>
  <p>new</p>
  <pre><code>    await api.upload(data, { headers }).then((res) =&gt; {
        console.log(res);
      });
  </code></pre>