How do I post form data with fetch api?
To quote MDN on FormData
(emphasis mine):
The
FormData
interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using theXMLHttpRequest.send()
method. It uses the same format a form would use if the encoding type were set to"multipart/form-data"
.
So when using FormData
you are locking yourself into multipart/form-data
. There is no way to send a FormData
object as the body and not sending data in the multipart/form-data
format.
If you want to send the data as application/x-www-form-urlencoded
you will either have to specify the body as an URL-encoded string, or pass a URLSearchParams
object. The latter unfortunately cannot be directly initialized from a form
element. If you don’t want to iterate through your form elements yourself (which you could do using HTMLFormElement.elements
), you could also create a URLSearchParams
object from a FormData
object:
const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
data.append(pair[0], pair[1]);
}
fetch(url, {
method: 'post',
body: data,
})
.then(…);
Note that you do not need to specify a Content-Type
header yourself.
As noted by monk-time in the comments, you can also create URLSearchParams
and pass the FormData
object directly, instead of appending the values in a loop:
const data = new URLSearchParams(new FormData(formElement));
This still has some experimental support in browsers though, so make sure to test this properly before you use it.
send formData POST request with nodejs
If you have a correct result in Postman, it's interesting to use the code generator in the same tools to have the desired code :). The button "</>" is on the right bar of the screen.
Here is the code generated from the tool :
var axios = require('axios');
var FormData = require('form-data');
var data = new FormData();
data.append('data', 'asldkfjalsdkjf');
var config = {
method: 'post',
url: 'https://some-domain.com/formdata',
headers: {
...data.getHeaders()
},
data : data
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
It's cool, isn't it?
One more thing, you have many options from NodeJS to C#, PHP.. :)
Related Topics
Remove All Elements Contained in Another Array
Looping Through an Object (Tree) Recursively
Access Outside Variable in Loop from JavaScript Closure
Jquery Submit Form and Then Show Results in an Existing Div
How to Use Greasemonkey to Selectively Remove Content from a Website
Phonegap Inappbrowser Display PDF 2.7.0
Making a Chrome Extension Download a File
Get Mouse Wheel Events in Jquery
How to Turn JavaScript Array into Comma-Separated List
How to Make JavaScript Object Using a Variable String to Define the Class Name
What Does Curly Brackets in the 'Var { ... } = ...' Statements Do
Is There Ever a Good Reason to Pass a String to Settimeout