Cloning Rarible Youtube Video 3 - Need help!

I am currently working on the youtube tutorial for cloning Rarible and I am on video 3. In this video we save the changes that user makes to the fields and then display a profile. I seem to be getting an error on the line that says:

await user.save();

The error I get is
Screenshot_17

The following is the full javascript code:

Moralis.initialize("hKeoWHI6EzttMjNolH6tCTyW73DKZW5aSMcVVJex");
Moralis.serverURL = 'https://lstsvf8dhcm8.moralis.io:2053/server';

init = async () => {
    hideElement(userInfo);
    window.web3 = await Moralis.Web3.enable();      //Enables Moralis and connects to web3 on the window 
    initUser();
}

initUser = async () => {
    if(await Moralis.User.current()){
        hideElement(userConnectButton);
        showElement(userProfileButton);
    }else{
        showElement(userConnectButton);
        hideElement(userProfileButton); 
    }
}

login = async() => {

    try {
        await Moralis.Web3.authenticate(); 
        initUser();
    } catch (error) {
        alert(error);
    }
}

logout = async() => {
        await Moralis.User.logOut();
        hideElement(userInfo);
        initUser(); 
    }
    

openUserInfo = async () => {
    user = await Moralis.User.current();
    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();
            showElement(userAvatarImg);
        }else{
            hideElement(userAvatarImg);
        }
        showElement(userInfo);
    }else{
        login(); 
    }
   
}

saveUserInfo = async () => {
    user.set('email',userEmailField);
    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();
}


hideElement = (element) => element.style.display = "none" ;
showElement = (element) => element.style.display = "block" ;

const userConnectButton = document.getElementById("btnConnect");
userConnectButton.onclick = login;

const userProfileButton = document.getElementById("btnUserInfo");
userProfileButton.onclick = openUserInfo;

const userInfo = document.getElementById("userInfo");
const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("txtEmail");
const userAvatarImg = document.getElementById("imgAvatar");
const userAvatarFile = document.getElementById("fileAvatar");

document.getElementById("btnCloseUserInfo").onclick = () => hideElement(userInfo);
document.getElementById("btnLogout").onclick = logout;
document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;

init();


You should use the respective values here instead of the reference to the element.
So userEmailField.value
Let me know If it did the trick :+1:

Yes! That worked.
Thank you! :slight_smile:

I get an error at the same step. My code is ok, but I am blocked by the server somehow… I am using chrome browser, lite-server, frpc with the init file. I hope you can help out!

Access to XMLHttpRequest at ‘https: //0praksgszywd.moralis.io:2053/server/classes/_User/eWkCnqrHIw’ from origin ‘http:// localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
moralis.js:21595 POST https: // 0praksgszywd.moralis.io:2053/server/classes/_User/eWkCnqrHIw net::ERR_FAILED

you have already created a thread about this, answering there