Express JS does not return form data, resulting in a null value

Question

Express JS does not return form data, resulting in a null value

I am encountering an issue while trying to send data from React to Express. I have an array of images that need to be sent, but due to the inability to send a single image as a test, I will need to clarify the scenario. To simplify the testing process, I have set a hardcoded image. Despite trying various methods without success, I still receive null on the server side.

React

    const formData = new FormData();

    formData.append('files', cartImg);

    axios
      .post(
        `http://localhost:8800/imgUpload`,
        { formData },
        {
          headers: { 'Content-Type': 'multipart/form-data' },
        }
      )
      .then((res) => setMessage(res.data));

Express

app.post('/imgUpload', (req, res) => {
  console.log(req.files);
});

reactjs express form-data

Answer 1

Answer №1

Make sure to include the following code snippet in your server configuration settings:

const express = require('express');
const app = express();

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

After adding this, you will be able to access form data through req.body

For example, use req.body.files

app.post('/imgUpload', (req, res) => {
  console.log(req.body.files);
});

Answer 2

Make sure to include the following code snippet in your server configuration settings:

const express = require('express');
const app = express();

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

After adding this, you will be able to access form data through req.body

For example, use req.body.files

app.post('/imgUpload', (req, res) => {
  console.log(req.body.files);
});

Express JS does not return form data, resulting in a null value

Answer №1

Similar questions

When the last character in the route is a forward slash, the Express server will load the HTML page with CSS and JavaScript. Conversely, if the last route character

Generating socket.io functionality with the Express framework

The form data does not contain any request body information upon submission

What is the best approach for handling text input modifications in a server-side rendered text box before full hydration?

Separating screens for logged in and logged out users in React Router with Firebase is not possible

An error occurred with the m.m.m.a.ExceptionHandlerExceptionResolver

Unraveling the Mysteries of Firebase Authentication with React

Unlocking Node.js packages within React JS is a seamless process

Facing issues using Angular 5 for PUT requests due to 401 errors

The Yarn Start Command encountered a hiccup and exited with error code 1

Create styles that reveal a div element upon hovering over a nested anchor link

Combine React 17 with webpack 5 and babel-plugin-react-css-modules, enabling the use of CSS modules with stylename functionality

Utilizing Ok & Cancel Buttons within the Material-UI DatePicker Component

Encountering an issue with the Jade Template Engine while utilizing a layout option

Make changes to the answer in an express/nodejs environment

Encountering a 404 error indicating that the file cannot be found while attempting to log into an authentication system developed using express and node

Searching using ReactJS when the user changes the input

Adding a double stroke to an Image Component in React Knova is a simple process that can enhance

Retrieving external parameters within an internal map within a dynamically created array of elements

Error encountered when attempting to utilize a variable within an EJS template document