Does formik use formData under the hood?

Question

I'm trying to upload an image with an formik form, if not how can I convert formik form values into formData?

Answer 1

Formik keeps state data which is usually retrieved while calling onSubmit from your <form>. You can add it to a FormData object, send it as json, etc.

For clarification of your question, the function FormData has a capital F (like Object in new Object()), but a common convention is to call the variable its values are assigned to formData (lowercase f), e.g.:

let formData = new FormData();

Back to Formik -

Formik is really nice in that it takes care of a lot of the details of form handling without you having to do all the boilerplate yourself, such as storing the state from the input field values, built-in handlers for onSubmit, onBlur, onChange, etc.

It does not attach the values from the input fields to any sort of object for you, though.

In the following example, the <Formik> component passes props for those values to the <Form> component, which is designed to work with them automatically.

My guess is most people use the application/json feature in fetch, since it doesn't require these extra steps, but if you want to use a FormData object, you have to invoke it explicitly.

Here's how that would work in context:

// Path: `/projectRoot/src/BriefFormikForm.jsx`
import React from 'react';
import { Form, Formik } from "formik";
import * as Yup from "yup";
import { formPost } from "./formPost";

const endpoint = "https://oursamedomain.net/phpmailer.php";

const nameRegEx = "^[aA-zZs-]+$";

const initialValues = {
  name: "",
  email: "",
  message: "",
};

const validationSchema = Yup.object({
  name: Yup.string()
    .matches(nameRegEx, `Must be only letters or hyphen`)
    .required(`Name is required`),
  email: Yup.string()
    .email(`That's not an email address!`)
    .required(`Email address is required`),
  message: Yup.string()
    .min(50, `Please include more details...`)
    .required(`Message is required`),
});

export default () => {
  return (
    <div>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}

        /* onSubmit is where you'll retrieve the
           state (values) from the input fields: */
        onSubmit={(values, actions) => {

          /* Then create a new FormData obj */
          let formData = new FormData();

          /* FormData requires name: id */
          formData.append("website", "question");
          
          /* append input field values to formData */
          for (let value in values) {
            formData.append(value, values[value]);
          }

          /* Can't console.log(formData), must
             use formData.entries() - example:  */
          for (let property of formData.entries()) {
            console.log(property[0], property[1]);
          }

          /* Now POST your formData: */
          formPost(endpoint, formData);
        }}
      >

        /* here's your html-like form */
        {(props) => (
          <Form onSubmit={props.handleSubmit}>
            <input
              htmlFor="name"
              id="name"
              name="name"
              placeholder="Name goes here"
              type="text"

            /* built-in props from <Formik /> */
              onBlur={props.handleBlur}
              onChange={props.handleChange}
              value={props.values.name}
            />
            <input
              htmlFor="email"
              id="email"
              name="email"
              onBlur={props.handleBlur}
              onChange={props.handleChange}
              placeholder="Email address goes here"
              type="text"
              value={props.values.email}
            />
            <textarea
              htmlFor="message"
              id="message"
              name="message"
              onBlur={props.handleBlur}
              onChange={props.handleChange}
              placeholder="Question goes here"
              rows="8"
              type="text"
              value={props.values.message}
            />
          </Form>
        )}
      </Formik>
    </div>
  );
};

Here's a fetch function to POST our formData to a .PHP file on the same server. This example logs all the values in the response object - if that's too much debugging info for you, get rid of the for in loop:

// Path: `/projectRoot/src/formPost.js`
export const formPost = (endpoint, formData) => {
  fetch(endpoint, {
    method: 'POST',
    mode: 'same-origin',
    body: formData,
  })
    .then(response => {

      /* tell me everything you know! */
      for (let key in response) {
        console.log('response: ', key, response[key]);
      }

      const result = response.text();
      if (!response.ok) {
        throw new Error('HTTP error: ', response.status);
      }
      return result;
    })
    .then(result => {
      console.log('fetch result: ', result);
    })
    .catch(error => {
      console.log('fetch error: ', error.message);
    });
};

Additional resources:

Basic example tutorial on official site:

Async onSubmit example using withFormik HOC