How to Save Files using React-Moralis from Twitter-Clone Youtube Tutorial

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>
      </>
    )
}

Hi,
You can find example on how to save files in this post: Video file uploaded to Moralis Storage not working

I saw that, but didnt really help as it was never fully answered

Hey @achello

Take a look at:

It’s fully answered

Let me know how it will work for you :man_mechanic:

I had to rework it to work with my code, but it worked thanks :slight_smile:

1 Like