@mantine dropzone React image upload issues while image upload on login form

Question

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>
    

Answer 1

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:

export default function DropzoneExample() {
    return (
        <Dropzone
            multiple={false}
            onDrop={(files) => {
                console.log(files);
                const formData = new FormData();
                formData.append('file', files[0]);
                fetch('http://MY_UPLOAD_SERVER.COM/api/upload', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    body: formData
                }).then(res => {
                    const respJson = res.json();
                    // console.log("File uploaded", respJson);
                    // TODO: Update ui and states....
                    // setUploads(respJson.url);
                    return respJson;
                }).catch(err => {
                    console.log("File upload error", err);
                    // TODO: Update ui and states with error....
                });

            }}
            onReject={(files) => console.log('rejected files', files)}
            accept={IMAGE_MIME_TYPE}
        >
            {(status) => dropzoneChildren(status, theme)}
        </Dropzone>
    );
}

const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) => (
    <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
        <ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} />

        <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>
);