@chilly-king-10285 i want to upload image to a user profile. how should i do it?

A message from kapa.ai

this is react component when someone click the avatar an upload window should appear import React, { useRef } from "react"; import { CheckCircle } from "@material-ui/icons"; import { Avatar, Box, Grid, Typography, useMediaQuery } from "@mui/material"; import ProgressBar from "../../../components/ProgressBar"; import { styles } from "../constants"; import dummyUser from '../../../../static/images/dummy-user-white.png'; import { useTheme } from '@mui/material/styles'; import { useSelector, useDispatch } from "react-redux"; import { ory } from "../../ory/pkg/sdk"; import { setOryUserData } from "../../store/actions/authActions"; const ProfileTop = () => { const outerTheme = useTheme(); const isMobile = useMediaQuery(outerTheme.breakpoints.down('sm')); const { user } = useSelector((state) => state.auth); const dispatch = useDispatch(); const fileInputRef = useRef(null); const handleAvatarClick = () => { fileInputRef.current.click(); }; const handleFileChange = async (event) => { const file = event.target.files[0]; if (file) { const formData = new FormData(); formData.append("image", file); // Example API call to upload the image (replace with your actual API call) try { const response = await ory.updateProfile({ body: formData }); dispatch(setOryUserData(response.data)); } catch (error) { console.error("Error uploading image:", error); } } }; return ( <Box component="div" sx={isMobile ? styles?.withBgImgMobile : styles?.withBgImg}> <Grid container spacing={2} sx={styles?.gridContainer}> <Grid item xs={12} sx={styles?.gridItem}> <div style={{ paddingLeft: isMobile ? '10px' : '40px' }}> <Typography variant={isMobile ? "h6" : "h4"} className="text-white">Complete Your Profile</Typography> <p className="text-white mb-0">to be eligible for a free online counseling session</p> </div> </Grid> <Grid item xs={6} sx={styles.gridItem} style={{ paddingLeft: isMobile ? '30px' : '60px' }}> <div className="d-flex align-items-center w-100"> <div> <Avatar alt="Display Picture" src={user?.picture || dummyUser} sx={{ width: isMobile ? 50 : 100, height: isMobile ? 50 : 100 }} className="border rounded-circle" onClick={handleAvatarClick} style={{ cursor: "pointer" }} /> <input type="file" ref={fileInputRef} style={{ display: "none" }} onChange={handleFileChange} accept="image/*" /> </div> <div className="pl-3 w-100"> <div className="pb-2"> <CheckCircle style={{ color: '#8ECC3B' }} /> <h6 className="d-inline text-white pl-2"> {user?.userDetails?.profileCompletion || 60}% Completed</h6> </div> <ProgressBar variant="determinate" value={user?.userDetails?.profileCompletion || 60} /> {user?.userDetails?.profileCompletion === "100" && <div className="pt-2"> <p className="text-white"><u className="font-weight-bold text-white cursor-pointer" onClick={() => window.open('https://timesconsultant.com/contact/online', '_blank', 'rel=noopener noreferrer')}>Redeem</u> your free online counseling session now!</p> </div> } </div> </div> </Grid> </Grid> </Box> ); }; export default ProfileTop; @chilly-king-10285

A message from kapa.ai