title: Uploading images with fetch to Express using Multer
body: <p>I'm attempting to upload images to an Express server. I'm not exactly sure about how to do this, but heres what I've got from what I've been able to pick up from MDN, <code>express</code>, <code>react-dropzone</code>, and <code>multer</code> Documentation. Multer does not seem to pick up the FormData object from <code>react-dropzone</code>, when logging out <code>req.file</code> it returns undefined.</p>
  
  <h3>server.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>var storage = multer.diskStorage({
          destination: './public/users',
          filename: function (req, file, cb) {
              switch (file.mimetype) {
                  case 'image/jpeg':
                      ext = '.jpeg';
                      break;
                  case 'image/png':
                      ext = '.png';
                      break;
              }
              cb(null, file.originalname + ext);
          }
      });
  
  var upload = multer({storage: storage});
  
  app.use(upload.single('photo'));
  
  app.post('/uploadUserImage', function (req, res) {
      console.log(JSON.stringify(req.body.photo)) // form fields
      console.log(req.photo) // form files
      console.log(req.file) // form files
      res.send(req.body.photo);
  });
  </code></pre>
  
  <h3>client.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>    function uploadImage (image) {
        var formData = new FormData();
        formData.append('photo', image);
        fetch('http://localhost:8080/uploadUserImage/', {
          method:'POST',
           body: formData
        });
      }
  </code></pre>
  
  <p>When I make this request <code>morgan</code> logs out the following:</p>
  
  <p>{ photo: '[object File]' }   &lt;--- from console.log(req.body');</p>
  
  <p>undefined                    &lt;--- from console.log(req.file);</p>
  
  <p><code>multer</code> creates the folder <code>public/uploads</code> but does not place the image in the location. How can I get the photo because I need to run it through <a href="https://github.com/lovell/sharp" rel="noreferrer">sharp</a> (to compress the filesize and resize the image) and then place it in the <code>uploads</code> folder?</p>