Sending FormData using AJAX to nodejs + express server

Question

Here is my frontend JS. As a side note, FormData.append() does not work, so I have to set its properties explicitly. @data is an object with input name: value properties.

function http(data) {
 
   const httpData = new FormData();
    for (let prop in data) {
        httpData[prop] = data[prop];
    }
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {

        if (this.readyState === 4) {
            const status = this.status;
            const data = this.responseText;

        }
    };
    xhttp.open('POST', '/api/login');
    xhttp.setRequestHeader('Content-Type', 'x-www-form-urlencoded');
    xhttp.send(httpData);
}

And on the server side

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

express ready to parse form data, and in the /routes/api.js (I am using express router)

router.post('/login', (req, res, next) => {

    console.log(req.body);
    res.end();
});

I got req.body as an {}

Where did I go wrong?

Quentin · Accepted Answer · 2020-09-07 22:12:44Z

2

You have three problems.

append() does work. It just doesn't store the data in a way that shows up with console.log. Assigning arbitrary properties doesn't work.
You need to send the correct Content-Type header. This is multipart/form-data with a mandatory boundary parameter that you have no way of knowing. Don't try to set the Content-Type header manually. XMLHttpRequest will generate it automatically from the FormData object.
You need a body parser for Express that supports multipart/form-data. The built-in one does not. The documentation for it on npm suggests 4 alternatives.

answered Sep 7, 2020 at 22:12

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sending FormData using AJAX to nodejs + express server

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related