req.body appears empty half the time

I’m having an issue with multer that has stumped me for a few days. Half the time, everything works as expected and flawlessly, and the other half of the time req.body is an empty object and req.file is undefined.

Here’s what my setup looks like:

Frontend:

  const source = {uri: image.path, isStatic: true, type: image.mime, name: image.path.split("/").pop()};
  const xhr = new XMLHttpRequest();
  let formData = new FormData();
  formData.append('userId', userId);
  formData.append('file', source);

  xhr.onreadystatechange = () => {
    if (xhr.readyState === xhr.DONE) {
      if (xhr.status >= 400) {
        alert(xhr.responseText);
      } else {
        const response = JSON.parse(xhr.response);
        if (response.success) {
          //success handler
        } else {
          //failure handler
        }
      }
    }
  };
  xhr.open('POST', `${ROOT_URL}/api/user/profile_photo`);
  xhr.send(formData);

The image object used in source is being supplied by a React Native module that selects and crops images.

My route:

    const multer = require('multer');
    const upload = multer().single('file');

    module.exports = function(app) {
      app.post('/api/user/profile_photo', upload, User.updateProfilePhoto);
    }

And Express endpoint:

    exports.updateProfilePhoto = function(req, res, next) {
      const _id = req.body.userId;
      const file = req.file;

      console.log("file", req.file);
      console.log("body", req.body);

      //S3 upload and other things
    }

I can’t for the life of me figure out what’s going wrong? It’s a pretty simple setup. I thought maybe it was a conflict with bodyParser but having tested it without bodyParser it still only works half of the time.

Any insight? I’m using v1.3.0 of multer

[dman777]

Are you sure it’s not this?

Note that req.body might not have been fully populated yet. It depends on the order that the client transmits fields and files to the server.

I resolved my issue by reversing the order of my form object properties in the front end:

        var newFormObj  = new FormData();
        newFormObj.append('internalUserID', internalUserID);
        newFormObj.append('listingImage', this.binaryImages[image]);

[axelpale]

Here are both for you @LinusU! I extended the empty-file test case with a Buffer.isBuffer(...) check. As predicted, this test fails without the explicit encoding argument. With it, all green 😃