CODEWITHSUNDEEP
reactjsmern
ASIF KAIF
ASIF KAIF

Reputation: 411

data is not appending in new FormData in react

Data is not appending, it is showing an empty object in console:

FormData: {}


  const { register, handleSubmit } = useForm()

  const onSubmit = async (data) => {
    const formData = new FormData()
    formData.append("picture", data.picture)
    formData.append("firstName", data.firstname)

    console.log(formData)
  }

    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('picture')} type="file"  />
      <input {...register('firstname')}  />
      <button>Submit</button>
    </form>

Upvotes: 1

Views: 2731

Answers (2)

fullstack
fullstack

Reputation: 834

FormData is a special type of object which is not stringifyable and can't just be printed out using console.log.

To print FormData content, try this:

const formData = new FormData();
formData.append("picture", 'somePictureData');
formData.append("firstName", 'some name');

for(var pair of formData.entries()) {
  console.log(`${pair[0]}: ${pair[1]}`);
}

Upvotes: 2

Sanoodia
Sanoodia

Reputation: 905

you dont have to use newForm() just set defualt values like this

const { register, handleSubmit } = useForm({
  defaultValues: {
    firstName: "bill",
    picture: "some link",
  }
})

Secondly var formData = new FormData(); // with empty params return empty data so you have to pass your FormId in new FormData like this

let myForm = document.getElementById('myForm');
let formData = new FormData(myForm);

Upvotes: 1

Related Questions