"Upload metadata to IPFS" returns "Uncaught SyntaxError": "Unexpected identifier"

Moralis General
#1

const jsonFile = new.Moralis.File(ā€œmetadata.jsonā€, {base64: btoa(JSON.stringify(metadata))}); : Uncaught SyntaxError: Unexpected identifier

Thanks Guys for bringing Moralis as a fast solution for the Blockchain Technology. I wish every developers knows about this as soon as possible.

I was following this tutorial on YouTube: ā€œMinting and Selling NFTs Without Paying Gas Fees! NFT Minter Programming Tutorialā€.
Iā€™m a beginner to progamming.I was writing the code along with him step by step. everything was working fine on my

moralisError
moralisError1899Ɨ997 131 KB
localhost wamp server, window 10 Home 64-bit. but until when I get to the Time at 28:43s (I think There is where my problem started).
ā€œUncaught SyntaxError: Unexpected identifierā€ is the return from my browser. In my ā€œmain.jsā€ is at the point of ā€œUpload metadata to IPFSā€. line 48. I would greatly appreciate any help on this. Thanks

Uncaught SyntaxError: Unexpected identifier

#2

that error sounds like a syntax error, I donā€™t know if is from metadata contents or from those " from metadata.json string (sometimes you have to use different type of " )

#3

Thanks for the reply. But I have checked the syntax carefully. but i think its somewhere in the useageof btoa functionā€¦ (But in the tutorial the btoa was having a stripe after it was typed vscode). Here is my full main.js code

/** Connect to Moralis server */
const serverUrl = " ";
const appId = " ";
Moralis.start({ serverUrl, appId });
let user;
/** Add from here down */
async function login() {
  user =  Moralis.User.current();
  if (!user) {
   try {
      user = await Moralis.authenticate({ signingMessage: "Hello World!" })
      initApp()
      
   } catch(error) {
     console.log(error)
   }
  }
  else{
      Moralis.enableWeb3(); 
      initApp()
  }
}

function initApp(){
  document.querySelector("#app").style.display ="block";
  document.querySelector('#submit_button').onclick = submit;
}

async function submit(){
  // Get Image Data
  const input = document.querySelector("#input_image");
  let data = input.files[0];

  // Upload image IPFS
  const imageFile = new Moralis.File(data.name, data);
  await imageFile.saveIPFS();
  let imageHash = imageFile.hash();
 
 //Upload image ro IPFS
 // cREATE metadata with image and data
 let metadata = {
  name: document.querySelector("#input_name").value,
  description:document.querySelector("#input_description").value,
  image:"/ipfs/" + imageHash
  
 }
 // Upload metadata to IPFS
 const jsonFile = new.Moralis.File("metadata.json",{base64: btoa(JSON.stringfy(metadata)});
 await jsonFile.saveIPFS();
 let metadataHash = jsonFile.hash();
 console.log(metadataHash);

 //Upload to Rarible (plugin)
 let res = await Moralis.Plugins.rarible.lazyMint({
    chain: 'rinkeby',
    userAddress: user.get("etherAddress"),
    tokenType: 'ERC721',
    tokenUri: '/ipfs/' + metadataHash,
    royaltiesAmount: 5, // 0.05% royalty. Optional
  })
  console.log(res);
 

}
login();


/** Useful Resources  */

// https://docs.moralis.io/moralis-server/users/crypto-login
// https://docs.moralis.io/moralis-server/getting-started/quick-start#user
// https://docs.moralis.io/moralis-server/users/crypto-login#metamask

/** Moralis Forum */

// https://forum.moralis.io/
#4

I think that here it should be JSON.stringify instead of JSON.stringfy

#5

Thanks. I was able to clear the misspelling. But the error persists.
The btoa function is what I also think could cause the syntax error. On the same line. As Iā€™ve said earlier the btoa error was a strike through word in the video tutorial. I attached the screenshot picture of the video tutorial to this reply

btoaError
btoaError1286Ɨ118 24.9 KB

#6

you can test btoa separately and with its corresponding parameters

you can also try to use this instead of btoa: const btoa = function(str){ return Buffer.from(str).toString('base64'); }

#7

I applied it like this:

// Upload metadata to IPFS
 const btoa = function(str){ return Buffer.from(str).toString('base64'); }
 await jsonFile.saveIPFS();
 let metadataHash = jsonFile.hash();
 console.log(metadataHash);

Iā€™m sure I didnā€™t applied it in the right way for it didnā€™t work. But Iā€™m totally confused.

#8

I think that you have to call that function somewhere, you can also give it a different name if you want. You can also add more logging with console.log

#9

Thanks once again. I later copy all the code directly from github and use them directly on my work and it works. The copy paste donā€™t really help me because i still donā€™t know why it didnā€™t work in the first place. and its desame code.
I still ran into another error. But I will open another ā€˜questionā€™ on the new error.