# How to use uppy with react-final-form?

**URL:** <https://community.transloadit.com/t/how-to-use-uppy-with-react-final-form/15776>\
**Category:** Uppy\
**Created:** [July 6, 2021, 8:57am UTC](https://community.transloadit.com/t/how-to-use-uppy-with-react-final-form/15776 "2021-07-06T08:57:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![AceroM](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/acerom/32/440_2.png) [@AceroM](https://community.transloadit.com/u/AceroM)\
**Post date:** [July 6, 2021, 8:57am UTC](https://community.transloadit.com/t/how-to-use-uppy-with-react-final-form/15776/1 "2021-07-06T08:57:56Z")

</div>

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](https://final-form.org/docs/react-final-form/api/Form) using

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

```

and a hook to initialize uppy right above

```auto
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

```auto
[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

```auto
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](https://github.com/transloadit/uppy/blob/6dbaddc09d36308821b842ed13a847f5d655cbf4/packages/%40uppy/form/src/index.js#L84) 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?

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [July 6, 2021, 9:24am UTC](https://community.transloadit.com/t/how-to-use-uppy-with-react-final-form/15776/2 "2021-07-06T09:24:25Z")

</div>

Hi, this seems to be an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem/66378#66378). 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`](https://uppy.io/docs/form/#) and not the `Form` component?