Theo's Typesafe Cult•2y ago

RHF & react-dropzone integration

I am having difficulties getting a Dropzone & RHF to work together. Right now upon submission I receive undefined and not the files. here is a somewhat scrappy codesandbox: https://codesandbox.io/s/angry-brown-v7zpgn?file=/src/App.tsx The image preview got messed up since I am using next/image in the real project.

Mordi490

CodeSandbox

angry-brown-v7zpgn - CodeSandbox

angry-brown-v7zpgn by Mordi490 using autoprefixer, postcss-cli, react, react-dom, react-dropzone, react-hook-form, react-scripts, tailwindcss

5 Replies

Mordi•2y ago

example of what the preview should have looked like, but it got scuffed 🤷‍♂️

Unknown User•2y ago

Message Not Public

Mordi•2y ago

Thanks! Can value be an object so that I can receive more than just the File[], ie:

{
  files: File[]
  previewImg: number
}

{
  files: File[]
  previewImg: number
}

meaning I could

<BasicDropzone files={field.value.files} onChangeFile={field.onChange} previewImg={field.value.previewImg}/>

<BasicDropzone files={field.value.files} onChangeFile={field.onChange} previewImg={field.value.previewImg}/>

or is there another way to go about doing that?

Unknown User•2y ago

Message Not Public

Mordi•2y ago

By "RHF's values" do mean the field.value or the whole form, ie. what we get onSubmit? I see what you mean, just do something like this: https://codesandbox.io/s/dark-hill-ikyjot?file=/src/App.tsx Doing

 onSubmit={handleSubmit((data) => {
        data.previewImg = previewImg;
        console.log(data);
      })}

 onSubmit={handleSubmit((data) => {
        data.previewImg = previewImg;
        console.log(data);
      })}

is probably wrong, but its the first thing I thought of and it works anyways, Thanks for the help! 👍

Gaming

Programming

RHF & react-dropzone integration