0

I have Controller which will accept the FormData() from the front-end, but when I am sending the data with Axios it will create the data in mongoDB, but the data is not showing up in the controller, means it is not available as req.body or FormData() in the req, can someone tell me what I am missing?

here is the code Controller:

const contactMiddleware = catchAsync(async (req, res, next) => {
  try {
    const newContact = await contact.create({
      name: req.body.name,
      email: req.body.email,
      subject: req.body.subject,
      text: req.body.text,
    });
    console.log(newContact, req.body);
    res.send('submit successfully');
  } catch (error) {
    console.log(error);
  }
});

Here is the Axios call and the FormData()


const submitContact = async (form_data) => {
  try {
    const url = 'http://127.0.0.1:8000/api/v1/user/contact/submit';

    const response = await axios({
      method: 'post',
      url,
      data: form_data,
      headers: { 'Content-Type': 'multipart/form-data' },
    });
    console.log('x---', response);
    if (response.data.status === 'success') {
      alert('Signup successfully !!!');
      window.location.href = '/user/home';
      contactForm.reset();
    }
    if (response.data.status === 'failed') {
      alert('signup attempt failed');
    }
  } catch (error) {
    alert(error.message);
  }
};

document.querySelector('.myForm').addEventListener('submit', (e) => {
  e.preventDefault();

  const form_data = new FormData(contactForm);

  form_data.append('name', document.getElementById('name').value);
  form_data.append('email', document.getElementById('emailId').value);
  form_data.append('subject', document.getElementById('subject').value);
  form_data.append('message', document.getElementById('text').value);
  // form_data.append('file', document.getElementById('files').files[0]);
  console.log(form_data);

  submitContact(form_data);
});

response I got and the FormData(), enter image description here

Bilal
  • 39
  • 5
  • Do you have [bodyParser](https://stackoverflow.com/questions/24800511/express-js-form-data) middleware set? – anttud Apr 13 '22 at 18:14
  • yes, it is set like this app.use(bodyParser.urlencoded({ extended: true })); – Bilal Apr 13 '22 at 18:15

1 Answers1

0

To collect data posted from the front end your express router must be listening to post requests at that route. Then you must ensure your express app is using express.urlencoded

app.use(express.urlencoded({ extended: true }));

or alternatively bodyParser

app.use(bodyParser.urlencoded({ extended: true }));
Joseph Palma
  • 11
  • 4
  • yes, I am listening to the route api/v1/user/contact/submit, and the I have applied and tried both: app.use(bodyParser.urlencoded({ extended: true })); and also app.use(express.urlencoded({ extended: true })); – Bilal Apr 13 '22 at 19:37
  • Even in the network tab in the payload, the data will show up, but not on the req.body in the controller – Bilal Apr 13 '22 at 19:39
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 13 '22 at 22:28