How to use Mantine dropzone with React hook form in Javascript

Question

Is there any solution to use Mantine dropzone with Reack hook form in javascript? I am doing a modal Upload using Tailwind components like this

import { useForm } from 'react-hook-form';
import { Group, Text, useMantineTheme } from '@mantine/core';
import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
export default function UploadForm({ isVisible, onClose }) {
    const { register, handleSubmit, formState: { errors } } = useForm({});
    const onSubmit = data => console.log(data);
    if (!isVisible) return <></>;
    return (
            <div className="bg-white shadow sm:rounded-lg">
                <div className="px-4 py-5 sm:p-6">
                    <h3 className="text-lg leading-6 font-medium text-gray-900">Create new subcategory</h3>
                    <div className="mt-2 max-w-xl text-sm text-gray-500">
                        <p>Enter subcategory's name</p>
                    </div>
                    <form onSubmit={handleSubmit(onSubmit)} className="mt-5 sm:flex sm:items-center">
                        <div className="w-full sm:max-w-xs">
                            <label htmlFor="Name" className="sr-only">
                                Name
                            </label>
                            <input
                                type="file"
                                {...register("file", { required: true })}
                            />
                        </div>
                        <button
                            type="submit"
                            className="mt-3 w-full inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                        >
                            Save
                        </button>
                    </form>
                </div>
            </div>
    );
}

But when i tried to change the input to Mantine dropzone, it always occured error. Is there any ideas? Thank you so much and sorry for bad English!

I want to have a modal form with only dropzone and submit button, but i'm still confusing with Mantine dropzone

You never use Dropzone in your code. Could you update the code to show the implementation you tried and what error you got. — Disco, Nov 20 '22 at 16:50

score 0 · Accepted Answer · answered Nov 21 '22 at 18:13

For someone stuck in this problem like me, you can use Controller and FormProvider of react-hook-form to solve this problem, just replace the input tag with the code below

<Controller
                        control={methods.control}
                        name="fileupload"
                        render={({ field }) => (
                          <Dropzone
                            onDrop={(files) =>
                              methods.setValue("fileupload", files)
                            }
                            onReject={(files) =>
                              console.log("rejected files", files)
                            }
                            maxSize={3 * 1024 ** 2}
                            accept={IMAGE_MIME_TYPE}
                            {...field}
                          >
                            <Group
                              position="center"
                              spacing="xl"
                              style={{
                                minHeight: 220,
                                pointerEvents: "none",
                              }}
                            >
                              <Dropzone.Accept>
                                <IconUpload
                                  size={50}
                                  stroke={1.5}
                                  color={
                                    theme.colors[theme.primaryColor][
                                      theme.colorScheme === "dark" ? 4 : 6
                                    ]
                                  }
                                />
                              </Dropzone.Accept>
                              <Dropzone.Reject>
                                <IconX
                                  size={50}
                                  stroke={1.5}
                                  color={
                                    theme.colors.red[
                                      theme.colorScheme === "dark" ? 4 : 6
                                    ]
                                  }
                                />
                              </Dropzone.Reject>
                              <Dropzone.Idle>
                                <IconPhoto size={50} stroke={1.5} />
                              </Dropzone.Idle>

                              <div>
                                <Text size="xl" inline>
                                  Drag images here or click to select files
                                </Text>
                                <Text
                                  size="sm"
                                  color="dimmed"
                                  inline
                                  mt={7}
                                >
                                  Attach as many files as you like, each
                                  file should not exceed 5mb
                                </Text>
                              </div>
                            </Group>
                          </Dropzone>
                        )}
                      />

and wrap all the form in <FormProvider {...methods}></FormProvider>, change submit function to onSubmit={methods.handleSubmit()}

How to use Mantine dropzone with React hook form in Javascript

1 Answers1