Hello all, I am following this tutorial: https://youtu.be/BRASwSnGLYc which is the introduction to using react-moralis (Twitter Clone). However, it seems to be incomplete as it does not show how to handle files, which is the part I am interested in (upload profile pictures etc.).
Therefore, I am turning to the forums for some clarifications. This is a slightly modified code of the video, I am unable to save the profile image or avatar of the user as it always gives me an empty object upon save.
Please let me know how to handle this as the video series is incomplete
P.S. I am using a Drawer component from Chakra-UI.
export const EditProfile = () => {
// fetch authenticated user
const {user, setUserData, userError, isUserUpdating } = useMoralis()
const {saveFile, moralisFile} = useMoralisFile();
// set state for authenticated user
const [username, setUsername] = useState(user.attributes.username)
const [email, setEmail] = useState(user.attributes.email)
const [password, setPassword] = useState("")
const [avatar, setAvatar] = useState("")
const { isOpen, onOpen, onClose } = useDisclosure()
const btnRef = useRef()
const handleSave = () => {
// call the setUserData in Moralis to save the user data in Moralis
// and make sure local variable is saved throughout the application
setUserData({
username,
email,
// check if password is an empty string (skip if undefined)
password: password === "" ? undefined : password,
avatar
})
}
return (
<>
<Button ref={btnRef} colorScheme="pink" onClick={onOpen}>
Edit Profile
</Button>
<Drawer
isOpen={isOpen}
placement="right"
onClose={onClose}
finalFocusRef={btnRef}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Update Account Details</DrawerHeader>
<DrawerBody>
{userError && <ErrorBox title="User change failed" message={userError.message} />}
<Box>
<Text>Username</Text>
<Input value={username}
onChange={(event) => setUsername(event.currentTarget.value)}
/>
</Box>
<Box>
<Text>Email</Text>
<Input value={email}
onChange={(event) => setEmail(event.currentTarget.value)}
/>
</Box>
<Box>
<Text>Password</Text>
<Input value={password}
onChange={(event) => setPassword(event.currentTarget.value)}
/>
</Box>
<Box>
<Text>Avatar</Text>
<Input type="file" value={avatar}
onChange={(event) => setAvatar(event.currentTarget.value)}
/>
</Box>
</DrawerBody>
<DrawerFooter>
<Button variant="outline" mr={3} onClick={onClose}>
Cancel
</Button>
<Button onClick={handleSave} isLoading={isUserUpdating}>
Save Changes
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
</>
)
}
