multer req file is undefined but why?

Question

Can anyone tell me why my req.file is undefined? I add the content header type, I add single.photo but I get no data

frontend:

## data is equal to this:
Object {
  "filename": "3ccc61e1-3c49-4538-9594-b4987b3fa66f.jpg",
  "type": "image/jpg",
  "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/UNVERIFIED-xxxxx-test/ImagePicker/3ccc61e1-3c49-4538-9594-b4987b3fa66f.jpg",
}

const uploadStory = async data => {
  try {
    const form = new FormData();
    form.append('photo', data);
    const options = {
      headers: {
        'Content-Type':'multipart/form-data',
        'Accept':'application/json'
      },
      method: 'POST',
      body: form
    };
    const res = await fetch('http://xxxxxxx.xx:3000/createstory', options);
    const out = await res.json();
    return out;
  } catch(e) {
    console.log(e);
    return e;
  }
};

export default uploadStory;

backend:

const multer = require('multer');

const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function(req, file, cb) {
    console.log(req);
    cb(null, `${file.filename}-${Date.now()}`)
  }
});

const upload = multer({
  storage: storage
}).single('photo');

module.exports = async (req, res, next) => {
  upload(req, res, function(err) {
    if(err) {
      console.log(err)
      return;
    } else if (err instanceof multer.MulterError) {
      console.log(err);
    } else {
      console.log(req.file);
      console.log('hi')
    }
  });
};

.................................. .................................. .................................. ..................................

Answer 1

Make sure your data object looks like this

{
    name: "3ccc61e1-3c49-4538-9594-b4987b3fa66f.jpg",
    type: "image/jpg",
    uri: "file:///data/user/0/host.exp.exponent/cache/ExperienceData/UNVERIFIED-xxxxx-test/ImagePicker/3ccc61e1-3c49-4538-9594-b4987b3fa66f.jpg",
}

In your data Object your key is filename instead of name

Change your upload to this

const upload = multer({
  storage: storage,
});

And then,

module.exports = upload.single('photo'), async (req, res) => {
  try {
    console.log(req.body); // Body Here
    console.log(req.file); // File Here
    res.status(500).send('Fetch Completed Successfully');
  } catch (error) {
    console.log(error);
    res.status(500).send('Error');
  }
}