How to use uppy with react-final-form?

Uppy
1

Hello, I’ve been trying to get uppy to work with an existing form I have using react final form.
I have a form initialized with Form using 

<Form {...props}>
      <DashboardModal
        name="images"
        hideUploadButton={true}
        inline={true}
        uppy={uppy}
      />
...
</Form>

and a hook to initialize uppy right above

const uppy = useUppy(() => {
    return new Uppy().use(Form, {
      target: null,
      resultName: "uppyResult",
      getMetaFromForm: true,
      addResultToForm: true,
      multipleResults: false,
      submitOnSuccess: false,
      triggerUploadOnSubmit: false,
    })
  })

I get this error

[Uppy] [01:04:36] Form plugin requires a <form> target react devtools backend. js:2560 element passed in options to operate, none was found at ItemForm(webpack-internal:///./app/items/components/ItemForm.tsx:62:92) at Suspense...

I’m guessing because the form doesn’t exist yet (if i create a regular html form in render it works).

I tried something hacky like

uppy.on("file-added", (result) => {
    let resultInput = document.createElement("input")
    resultInput.name = "uppyResult"
    resultInput.type = "hidden"
    resultInput.value = JSON.stringify(result)
    document.querySelector("form").prepend(resultInput)
  })

Based off of the addResultToForm code, and it seems to not appear in the onSubmit still.

Is there any example code or support for integrating uppy with existing forms or form libraries such as react-final-form?

2

Hi, this seems to be an XY problem. What is the problem you are trying to solve by combining react-final-form with Uppy?

Some other observations:

  • It’s probably best to initialize Uppy outside of your component instead of inside a hook. There shouldn’t be a need for it to re-render the initialization.
  • I suppose the .use(Form is @uppy/form and not the Form component?