So i set the x = await user.set(); , then i got this error below in my console
main.js:68 Uncaught (in promise) TypeError: userAvatar.url is not a function
at openuserInfo (main.js:68)
you should concentrate on what you are doing there, what does x = await user.set() do? how is that you added that line now?
After clicking on save button it says avatar saved successfully but when i click on ok, i got this error in my console showing in the screenshot @cryptokid
what you have instead of this in your code?
const avatar = new Moralis.File("avatar.jpg", userAvatarImg.files[0]);
x = await avatar.save();
user.set("avatar", x);
What should i do to this error?
I added a new reply above, did you noticed that one?
Yes i added the code and it says user info saved successfully and when i click ok, this error shows in my console
Uncaught (in promise) TypeError: userAvatar.url is not a function
at openuserInfo (main.js:68)
This same error when i click on ok
@cryptokid This is my 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.value);
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);
}
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");
what you get if you use console.log to display what that userAvatar has at that point when the error is generated?
you will have to learn how to debug this type of problems yourself.
This is my html code @cryptokid
<!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>
ok, what should I do with this html code?
When i use console, it says userAvatar is not defined
const userAvatar = user.get("avatar");
you did a console.log after this line?
Yes i added this afte the line const userAvatar = user.get("avatar");
I added this to the console console.log("Open User info"); @cryptokid
It will show user info saved successfully but when i click on ok, it will show this error in my console
Uncaught (in promise) TypeError: userAvatarImg.url is not a function
at openuserInfo (main.js:69)
openuserInfo @ main.js:69
async function (async)
openuserInfo @ main.js:55
saveUserInfo @ main.js:93
try to use console log to see what you have in that variable with the name userAvatarImg, and not only a console.log with a text
When i use the variable name on console.log in the console terminal, it shows this below
undefined