Vue Land FAQ

Appearance

Why is my FormData empty? ​

The problem ​

Let's imagine you've created a FormData object:

js
const formData = new FormData()
formData.append('product', 'id-1234')

The specifics don't matter too much, but clearly formData should not be empty, it should contain an entry for product.

If you try to check the contents of formData in the console:

js
console.log(formData)

You'll likely see something like this:

▼ FormData {}
  ▶ [[Prototype]]: FormData

It appears to be empty.

Using JSON.stringify() doesn't help either:

js
console.log(JSON.stringify(formData))

Output:

{}

You could try outputting the object in a component template using {{ formData }}, but that still doesn't show the product.

The solution ​

The formData object isn't empty, but none of the techniques we've used so far will show that.

FormData exposes the methods keys(), values() and entries() that we can use to inspect its contents. For example:

js
console.log(Object.fromEntries(formData.entries()))

Now we'll get the output we wanted:

{product: 'id-1234'}

Here's a Playground example to demonstrate this in action:

Nope, still doesn't work ​

If you're still getting an empty object, then perhaps your FormData object really is empty.

If you're creating the FormData object by passing in a <form>, the first thing to try is appending a hardcoded dummy field, just to check that it shows up in the logging. For example:

js
const formData = new FormData(myForm.value)

formData.append('dummy', 'foo')

console.log(Object.fromEntries(formData.entries()))

In the example above, myForm is a template ref, so we pass myForm.value to the FormData constructor.

If we can see the dummy field in the console logging then we know the problem isn't with the logging. The FormData really was empty.

The FormData constructor will usually throw an error if you pass in an invalid value, but it allows undefined to be passed. Try console logging the value you're passing to FormData, to confirm it's an HTMLFormElement and not undefined:

js
console.log(myForm.value) // Check it isn't undefined
const formData = new FormData(myForm.value)

Let's assume the form passed to the constructor isn't undefined, what else could be going wrong?

If possible, use the Elements tab in your browser developer tools to inspect the <form> (or inspect the logged value in the console). Check that it actually contains valid fields, such as <input> elements. Then:

  1. Ensure each element has a name. This is used as the key to populate the FormData. An id isn't sufficient, it needs a name.
  2. Check the element isn't disabled. Disabled elements will be ignored.
  3. For an <input> with type="checkbox", it will only be included if the checkbox is checked.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData