I am not able to upload cropped image in minio bucket instead i get original copy of image ?

[devjariwala203]

const [selectedFile, setSelectedFile] = useState(null); const [isDialogOpen, setIsDialogOpen] = useState(false); const updateConversationThumbnailMutation = useMutation({ mutationFn: updateConversationThumbnail, onSuccess: () => { toastSuccess(Conversation thumbnail updated successfully); setSelectedFile(null); }, onError: (error) => { toastError(Error updating conversation thumbnail: ${JSON.stringify(error)}) } }) const handleUpdateThumbnail = () => { const formData = new FormData(); formData.append('thumbnail', selectedFile); for (let [key, value] of formData.entries()) { console.log(${key}: ${value}`);
}
updateConversationThumbnailMutation.mutate({ conversationId: convo?.conversation_id, data: formData });
}
const onDrop = useCallback((acceptedFiles) => {
const file = acceptedFiles[0]
if (!file) {
alert("Selected image is too large!")
return
}

    const fileWithPreview = Object.assign(file, {
        preview: URL.createObjectURL(file),
    })

    setSelectedFile(fileWithPreview)
    setIsDialogOpen(true)
}, [])
const accept = {
    "image/*": [],
};
const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept,
})`
` {selectedFile ?
                        <ImageCropper
                            dialogOpen={isDialogOpen}
                            setDialogOpen={setIsDialogOpen}
                            selectedFile={selectedFile}
                            setSelectedFile={setSelectedFile}
                        /> :
                        <Avatar  {...getRootProps()} className="tw-size-36 tw-cursor-pointer">
                            <input {...getInputProps()} />
                            <AvatarImage src={convo?.is_group ? convo?.thumbnail_src : convo?.user?.thumbnail_src} />
                            <AvatarFallback className="tw-border tw-size-36 tw-border-blue-500 tw-text-blue-500 tw-bg-blue-100 tw-font-semibold tw-text-6xl" style={{ color: uniqueColor, border: `3px solid ${uniqueColor}`, backgroundColor: `${uniqueColor}20` }} >{fallback(convo?.is_group && !convo?.user_id ? convo?.conversation_name || '-' : convo?.user?.UserName || '-')}</AvatarFallback>
                        </Avatar>
                    }
                    {selectedFile && (
                        <div className="tw-flex tw-items-center tw-space-x-4 tw-mt-4">
                            <Button variant="outline" onClick={() => setSelectedFile(null)} >Cancle</Button>
                            <Button variant="gradient" onClick={handleUpdateThumbnail} >Save</Button>
                        </div>
                    )}`