File upload in formik

[Parasbuda]

How to upload a file using axios in formik

[johnrom]

The same way you upload a file using any other http request. Here's an example using fetch (I don't use Axios, but the important thing is you set the request body to a FormData object):

const initialValues = {
   myFile: '',
}
const onSubmit = async (values) => {
  const body = new FormData();

  body.append('myFile', values.myFile);

  await fetch('api/upload', {
    method: 'POST',
    body,
  });
}
const MyForm = () => 
  <Formik initialValues={initialValues} onSubmit={onSubmit}>
    <Form>
      <label htmlFor="myFile">Upload a file</label>
      <Field type="file" id="myFile" name="myFile" />

      <button type="submit">Submit</button>
    </Form>
  </Formik>