I tried for getting the image path with Dropzone in this way {...form.getInputProps("tourImages")} but it gives undefined . Also, I tried getting an image input with useState hooks, image path is displaying but, it is not displaying inside of form. Please, see the below :
const getImage = (imageFile: any) => {
setImageUpload(imageFile[0].path);
};
const [imageUpload, setImageUpload] = useState( );
const form = useForm({
schema: joiResolver(schema),
initialValues: {
name: "",
sername: "",
email: "",
tourImages : "" ,
imageUpload,
},
});
<Dropzone
onDrop={(files) => {
getImage(files);
}}
onReject={(files) => console.log("rejected files", files)}
maxSize={3 * 1024 ** 2}
accept={IMAGE_MIME_TYPE}
{...form.getInputProps("tourImages")}
>
{(status) => dropzoneChildren(status, theme)}
</Dropzone>
With Mantine dropzone provider you could upload your files with files parameter in onDrop={} method. This onDrop function calls after file selected from user successfully. So after file selection you will able to upload your files to upload server with multipart/form-data request using Fetch Api like shown below. If you want to validate upload url. You should pass api returned url string to react state in the end of the onDrop() method.
Example usage of Dropzone: