DEV Community

loading...
getd.io/ - Postman without native apps

'x-www-form-urlencoded' or 'form-data' 😵 ? Explained in 2 mins.

techbos profile image TechBos😎 Updated on ・3 min read

TL;DR

If you need file uploads, form-data is your only option here. Otherwise, they serve the same job. form-data is a fancier way of encoding data than x-www-form-urlencoded. You can think of x-www-form-urlencoded as .txt file and form-data as .html file. In the end of day they both deliver some http payload.

Try 🏀 getd.io playground links 🏀 below to see what the headers and body look like:

Content Type

content-type
x-www-form-urlencoded application/x-www-form-urlencoded
form-data multipart/form-data; boundary={boundary string}

A quick note for form-data: Usually the browser generates a random {boundary string}, e.g., ----WebKitFormBoundaryKGUmWkAsjo5nUBp2, but you can specify your own if you want. See below for examples.

Request Payload

Let's say you have a login form with fields below:

Fields Values
username techbos
password Pa$$w0rd

When you post the form, the payload for x-www-form-urlencoded looks like below. Note how strings are encodeURIComponent()'d.

username=techbos&password=Pa%24%24w0rd

For form-data, each (key, value) pair is encoded in its own section, with {boundary string} as separator. Here I also included a sample section in the end to show you what a file upload looks like:

--{boundary string}
Content-Disposition: form-data; name="username",

techbos
--{boundary string}
Content-Disposition: form-data; name="password",

Pa$$w0rd
--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,

--{boundary string}--

Explained inline:

Alt Text

API to send request

x-www-form-urlencoded form-data
fetch() body as URLSearchParams body as FormData
request() form option formData option
axios() data as URLSearchParams data as FormData

API to handle response

For x-www-form-urlencoded, use bodyParser, which will parse payload into req.body in the format of { key, value }.

express.use(bodyParser.urlencoded({ extended: true }));
express.post('/my-form-endpoint', (req, res) => {
  console.log(req.body.username); // print 'techbos'
});

Same functionality also comes built-in with Express v4.16.0+.

For parsing form-data, you can use packages such as busboy or formidable. See their doc for how-to.

What's your favorite library for sending / handling forms? Leave a comment below to share your experience ❤️❤️❤️!

Check out getd.io and leave some feedback on what features you'd like to see next ❤️❤️❤️!

Discussion (4)

pic
Editor guide
Collapse
9kopb profile image
Якорь

wow, thx!

Collapse
mo93odi profile image
mo93odi

Thanks for Sharing

Collapse
ma7eer profile image
Maher Alkendi

Super useful! Thank you!

Collapse
rukmanigupta7 profile image
Rukmani Gupta FCA MBA

Hi, I am a user, I built a form through CKEditor, now how can get the data filled by users.