Can Mantine dropzone be used with React hook form in JavaScript? I am currently working on 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>
<Dropzone
{...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>
);
}
However, changing the input to Mantine dropzone always results in an error. Any suggestions?
I aim to create a modal form with only a dropzone and submit button, but I'm struggling with Mantine dropzone functionality.