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");
if (userAvatar) {
userAvatarImg.src = userAvatar.url();
document.getElementById("userAvatarImg").style.display = "block";
} else {
document.getElementById("userAvatarImg").style.display = "none";
}
document.getElementById("userInfo").style.display = "block";
} else {
login();
}
}
async function saveUserInfo() {
user.set("email", userEmailField.value);
user.set("username", userUsernameField);
if (userAvatarFile.files.length > 0) {
const Avatar = new Moralis.File(avatar.jpg, userAvatarFile.files[0]);
}
user.set("avatar", avatar);
await user.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("imgAvatar");
const userAvatarFile = document.getElementById("fileAvatar");
Can you also add your html?
1 Like
<!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="50px" height="50px" 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>
It looks like it doesn’t work because it has an error here, it looks like you don’t have that userAvatarImg element in your html.
You can open the browser console and look on what errors you have there.
I am getting this error in my console when i was trying to save the userinfo
Uncaught (in promise) ReferenceError: avatar is not defined at HTMLButtonElement.saveUserInfo (main.js:85)
that may be because you don’t have an avatar and the script may stop at that error and that is why it doesn’t work
here take a look at my 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");
if (userAvatar) {
userAvatarImg.src = userAvatar.url();
document.getElementById("imgAvatar").style.display = "block";
} else {
document.getElementById("imgAvatar").style.display = "none";
}
document.getElementById("userInfo").style.display = "block";
} else {
login();
}
}
async function saveUserInfo() {
user.set("email", userEmailField.value);
user.set("username", userUsernameField);
if (userAvatarImg.files.length > 0) {
const avatar = new Moralis.File("avatar.jpg", userAvatarImg.files[0]);
user.set("avatar", avatar);
}
await user.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("imgAvatar");
when i click on save button, it shows this error in my console
main.js:82 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
at HTMLButtonElement.saveUserInfo (main.js:82)
and what you have at that line 82 in your javascript file?
if (userAvatarImg.files.length > 0) {
This is my line 82 of the file
the looks like userAvatarImg.files is undefined. now you get a step back to see where you initialised userAvatarImg variable.
you can also use console.log(variable_name) to see what values have a variable in your code, or you can write directly in your browser console
what should i do to solve this?
i don’t understand how to do that
Okay now i write on the console and it gives me this below
console.log(userAvatarImg)
VM422:1 <img width="50" height="50" src(unknown) id="imgAvatar" alt style="display: none;">
undefined
I think that if you remove/comment the part with avatar from you javascript code, then it will start to work.
Which part did you say i should remove?
this part, or you can comment that line from else initially
How do i comment each part?