I am unable to get userInfo and profile button not working - CLONE RARIBLE IN 24 HORS

Moralis General
#41

This is my html code

<!DOCTYPE html>
<html>
<!-- HEADER STARTS HERE -->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32" />
    <link rel="apple-touch-icon" href="icon/favicon-32x32.png" />

    <meta name="description" content="MrGrandpa doge, Is the ORIGINAL OG of crypto.
    He is a smooth talking r&b singing 🎤 playboy,
    who believes that bitcoin is the most secure investment in the crypto universe,
    don't get him wrong he's a strong believer of doge coin as well." />
    <meta name="keywords" content="MrGrandPaDoge #MRBTC" />
    <meta name="Developer" content="Isaiah Fadakinte" />
    <meta name="Owner" content="Joey Duque" />
    <title>
        MrGrandpadoge NFT Marketplace | No 1 first Multi Network MarketPlace
    </title>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://npmcdn.com/moralis@latest/dist/moralis.js"></script>
</head>
<!-- HEADER STOPS HERE -->

<!-- BODY STARTS HERE -->

<body>
    <h1>MrGrandPaDoge NFT Marketplace</h1>

    <button id="btnConnect">Connect wallet</button>
    <button id="btnUserInfo">Profile</button>

    <! -- adding the UserInfo details like Email & username -->

    <div id="userInfo">
        <h4>User Profile</h4>
        <input type="text" id="txtUsername" required placeholder="Enter username" />
        <input type="text" id="txtEmail" placeholder="Enter email" />
        <small>Optional</small>

        <! -- adding the avatar file -->

        <img width="200" height="200" src="" id="imgAvatar" alt="" />
        <label for="fileAvatar">Select Avatar</label>
        <input type="file" id="fileAvatar" />

        <button id="btnLogout">LogOut</button>
        <button id="btnCloseUserInfo">Close</button>
        <button id="btnSaveUserInfo">Save</button>
    </div>

    <script src="js/main.js"></script>
</body>
<! --BODY ENDS HERE -->

</html>
#42

what happens if you use:

x = avatar.save();
user.set(“avatar”, x);

instead of user.set("avatar", avatar);?

#43

I will do that right away

#44

also add an await for avatar.save(), like x = await avatar.save()

#45

after adding it, so i tried to click on save button, then it didn’t work, instead i got this error in my console

Uncaught (in promise) ReferenceError: avatar is not defined
    at HTMLButtonElement.saveUserInfo (main.js:91)
#46

you should still have this line
that you could change it to const avatar = new Moralis.File("avatar.jpg", userAvatarImg.files[0]);

#47

This is my main.js 91 below
x = await avatar.save();

#48

Yes i do it’s there in my code

#49

Okay i will do that now

#50

it is strange that it says that avatar is not defined, if it should be defined the line above.
you can also use some console.log from time to time for debugging purposes

#51

Still same error bro

Uncaught (in promise) ReferenceError: avatar is not defined
    at HTMLButtonElement.saveUserInfo (main.js:91)
#52

This is my new main.js code

const serverUrl = "https://mzrhanzmogsu.moralishost.com:2053/server";
const appId = "gFnTLmvgt8ZDUYMXF80FIonsCRqosKxXcfzmO2bM";
Moralis.start({ serverUrl, appId });

async function hide_buttons() {
    let user = await Moralis.User.current();
    if (!user) {
        document.getElementById("btnConnect").style.display = "block";
        document.getElementById("btnUserInfo").style.display = "none";
        document.getElementById("btnLogout").style.display = "none";
        document.getElementById("userInfo").style.display = "none";
    } else {
        document.getElementById("btnUserInfo").style.display = "block";
        document.getElementById("btnConnect").style.display = "none";
        document.getElementById("btnLogout").style.display = "block";
    }
}

hide_buttons();

async function login() {
    let user = Moralis.User.current();
    if (!user) {
        try {
            user = await Moralis.authenticate({
                signingMessage: "Welcome to GrandPaDoge NFT MarketPlace",
            });
        } catch (error) {
            alert(
                (error =
                    "Please consider installing Metamask to connect to MrGrandPaDoge NFT MarketPlace")
            );
        }
    }
    console.log("logged in user:", user);
    hide_buttons();
    const isWeb3Active = Moralis.ensureWeb3IsInstalled();

    if (isWeb3Active) {
        console.log("Activated");
    } else {
        async function enable() {
            await Moralis.enable();
        }
    }
}

async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
    hide_buttons();
}

async function openuserInfo() {
    user = await Moralis.User.current();
    hide_buttons();
    if (user) {
        const email = user.get("email");
        if (email) {
            userEmailField.value = email;
        } else {
            userEmailField.value = "";
        }
        userUsernameField.value = user.get("username");
        const userAvatar = user.get("avatar"); //Display user avatar
        if (userAvatar) {
            //user avatar function
            userAvatarImg.src = userAvatar.url(); //avatar source to get the url
            document.getElementById("imgAvatar").style.display = "block"; //display avatar
        } else {
            document.getElementById("imgAvatar").style.display = "none"; //hide avatar when user is connected
        }
        document.getElementById("userInfo").style.display = "block"; //Hide userinfo
    } else {
        login(); //if not,then login
    }
}

async function saveUserInfo() {
    //save user info
    user.set("email", userEmailField.value);
    user.set("username", userUsernameField);

    if (userAvatarImg.files.length > 0) {
        //get user avatar
        const avatar = new Moralis.File("avatar.jpg", userAvatarImg.files[0]);
        x = avatar.save();
        user.set("avatar", x);
    }

    x = await avatar.save();
    alert("User info saved successfully!");
    openuserInfo();
}

async function closeuserInfo() {
    user = await Moralis.User.current();
    hide_buttons();
    if (user) {
        document.getElementById("userInfo").style.display = "none";
    } else {
        logOut();
    }
}

document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;
document.getElementById("btnCloseUserInfo").onclick = closeuserInfo;
document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;

const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("txtEmail");
const userAvatarImg = document.getElementById("fileAvatar");
#53

When i do some console @cryptokid i got this error i use console(avatar) then i got this error

VM207:1 Uncaught ReferenceError: avatar is not defined
    at <anonymous>:1:9
#54

I know now why you get that avatar is not defined error, it is because you copied that code twice

#55

this error is from this line:
user.set("username", userUsernameField);
where you should use
user.set("username", userUsernameField.value);

#56

Which code did i copied twice?

#57

It looks like you replaced a line that was supposed to save user with a line that now tries to save avatar, and it looks like you have twice avatar.save() in your code now

after you fix that, you will also need to initialize user variable in that function, and after that it should work fine

#58

i can’t seem to see where i use avatar.save() twice in the code

#59

here it looks like it is twice

#60

What i do about it? Should i remove