Trigger uppy upload on HTML form submission

Uppy
1

I am trying to get Uppy to start its upload when I submit my form. I am using React and Flask as my server backend. Also using Formik for my forms.

JS

    .use(Form, {
            target: document.querySelector("form"),
            resultName: "uppyResult",
            getMetaFromForm: true,
            addResultToForm: true,
            multipleResults: true,
            submitOnSuccess: true,
            triggerUploadOnSubmit: true
      })

HTML

 <Form id="recipeForm" className="col-8 mx-auto">
        <h1>Title</h1>
        <Field type="title" name="title" />
        <ErrorMessage name="title" component="div" />
        <h1>Ingredient</h1>
  <button type="submit" id="recipeSubmit"> Submit </button>

I have the target set to the correct DOM element. Is there something I am missing?

2

Okay. The @uppy/form package is built for submitting using HTML Forms. In this case, it’s probably better to use the Formik onSubmit prop instead of using the Form plugin. Something like this

<Form 
  id="recipeForm" 
  className="col-8 mx-auto" 
  onSubmit={values => {
          // Run your uploading code here
  }}
>
// the other code
</Form>

I hope this helped

- Andrew