title: req.file is undefined using multer
body: <p>Im setting up a server to run a blackjack game and I want to store profile pictures on amazon S3 using multer on the backend. However, whenever I try to send an image from my frontend to the backend, my req.file is undefined.</p>
  
  <p>There are many posts with this probelm, but i have done most of what they said and its been to no avail.</p>
  
  <p>my HTML input:</p>
  
  <pre><code>&lt;fieldset&gt;
                  &lt;legend&gt;Create Account&lt;/legend&gt;
                  Username:&lt;input type="text" id="createUser"&gt;&lt;br&gt;
                  Password:&lt;input type="password" id="createPW"&gt;&lt;br&gt;
                  Screen Name: &lt;input type="text" id="createScreen"&gt;&lt;br&gt;
                  Profile Picture: &lt;input type="file" enctype="multipart/form-data"  id="avatar" name="avatar" accept="image/png, image/jpeg"&gt;
                  &lt;button id="createAccountButton"&gt;Submit&lt;/button&gt;
              &lt;/fieldset&gt;
  </code></pre>
  
  <p>my frontend fetch (pure js):</p>
  
  <pre><code>fetch(ec2+"/image-upload", {method: "POST", body: file}).then(checkStatus).catch(function(e){console.log(e);});
  </code></pre>
  
  <p>my backend:
  server.js</p>
  
  <pre><code>const singleUpload = upload.single('avatar');
  
  app.post('/image-upload',function(req, res) {
      console.log(req.file);
      singleUpload(req, res, function(err, some) {
        if (err) {
          return res.status(422).send({errors: [{title: 'Image Upload Error', detail: err.message}] });
        } 
        return res.json({'imageUrl': req.file.location});
      });
    })
  </code></pre>
  
  <p>upload:</p>
  
  <pre><code>var upload = multer({
    storage: multerS3({
      s3: s3,
      bucket: 'cloud-bj-bucket',
      acl: 'public-read',
      metadata: function (req, file, cb) {
        cb(null, {fieldName: 'TESTING_METADATA'});
      },
      key: function (req, file, cb) {
        cb(null, file.filename);
      }
    })
  })
  </code></pre>
  
  <p>The error is within the backend part</p>
  
  <p>EDIT:
  here is how i am getting the image from the html</p>
  
  <pre><code>var file = document.getElementById("avatar").files[0];
  
  fetch(ec2+"/image-upload", {method: "POST", body: file}).then(checkStatus).catch(function(e){console.log(e);});
  </code></pre>