"Now" is grossly inaccurate because has supported Form Data since v5.0 (since April), and we’re already at v6.0 🙃. zlFetch Nevertheless, let me share with you what this is all about. How supports Form Data zlFetch You can now pass Form Data content into and it will correctly send a encoding to the server. zlFetch multipart/form-data form.addEventListener('submit', async event => {
  const data = new FormData(form)

  const response = await zlFetch('some-url', {
    body: data,
  })
}) This is similar to the rest of our API where automatically helps you set the header: zlFetch Content-Type If you pass in an object, it converts the data into JSON and sends an content type. application/json If you pass in a string, it uses the content type. application/x-www-form-urlencoded Problems with Form Data I’m not a fan of using Form Data because of two reasons: The backend needs to support it You can’t tell what’s inside a Form Data easily The backend needs to support it Form Data is more complicated than or data because it can be sent in multiple parts. json x-www-form-urlencoded In express, you can support Form Data by adding the package. multer import multer from 'multer'
const upload = multer()
app.use(upload.array()) Most of the time, I prefer to send JSON since there's no need to use and mess with . multer multipart/form-data It’s harder to debug Form Data You can’t see what’s inside a Form Data easily. If you want to see the contents, you have to loop through the form data and log each entry. const data = new FormData(form)
for (const key, value of data) {
	console.log(key, value)
} This is way too complex for my liking. I prefer to use an Object and see everything at once. Converting Form Data into an object Because I like working with objects more than Form Data, I included a utility in that lets you convert Form Data into an object. zlFetch With this, you no longer need to extract each form element individually. Just use the utility and it’ll handle the data for you. import zlFetch, { toObject } from 'zl-fetch'

form.addEventListener('submit', async event => {
  const formData = new FormData(form)
  const data = toObject(formData)

  console.log(data)
}) You can then send this data as JSON over to the server like this: import zlFetch, { toObject } from 'zl-fetch'

form.addEventListener('submit', async event => {
  const formData = new FormData(form)
  const data = toObject(formData)

  const response = await zlFetch('some-url', {
    body: data,
  })
}) I also added this utility into 🙃. So you can tell that I’m putting lots of helpful things into Splendid UI as I go along. Splendid UI It’s gonna be one of the best component libraries around. I’ll share more about Splendid in another post. Speaking about utilities, I've created another utility to it easy to send data. form-urlencoded Utility for form-urlencoded data contains a utility that can convert an object into a query string. zlFetch toQueryString This makes it easy to send data. x-www-form-urlencoded import { toQueryString } from 'zl-fetch'

zlFetch.post('some-url', {
  body: toQueryString({ message: 'Good game' }),
}) Behind the scenes, this is a simple utility since we're just passing the object through 🙃. But hey, it's good to have this utility since it makes things a little bit simpler than before! URLSearchParams export function toQueryString(object) {
  const searchParams = new URLSearchParams(object)
  return searchParams.toString()
} That's it for today! Further reading Check 's . zlFetch documentation Get 2 chapters of my for free and become fluent in AJAX. Async JS course See how makes web development much easier for you and me! Splendid UI . Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂. By the way, this article was originally written on my blog Also published . here

Effortless Local File System Caching with Splendid UI's fileCache Utility

Understanding the Limitations of Scoped CSS

Read my articles here

Nominated for 2022 - HackerNoon Contributor of the Year - Data Security

Too Long; Didn't Read

Make resilience your competitive advantage

zlFetch now supports FormData Making Data Handling Seamless!

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

An Overview of Server Side and Isomorphic Async Rendering

Asynchronous Javascript For Beginners

Changing Async/Await to Promises.all to Speed Up API Calls in Node.JS

Exploring Differences Between Promises And Callbacks in JavaScript

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

An Overview of Server Side and Isomorphic Async Rendering

Asynchronous Javascript For Beginners

Changing Async/Await to Promises.all to Speed Up API Calls in Node.JS

Exploring Differences Between Promises And Callbacks in JavaScript

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps