Greetings Everyone!
I made an NFT minter using Moralis but when I click the mint button I get an error: TypeError: Cannot read properties of undefined (reading âFileâ). This is happening on this specific line in my code: const file1 = new Moralis.File(file.name, file);
The entire file is as follows:
import { useMoralis, useWeb3Contract } from âreact-moralisâ
import { useRouter } from ânext/routerâ
import { useState, useEffect } from âreactâ;
import { abi, contractAddress, ContractAddress } from ââŚ/constants/indexâ;
import { Moralis } from âmoralisâ;
import Web3 from âweb3â;
const web3 = new Web3(Web3.givenProvider);
export default function Dashboard() {
const { isWeb3Enabled, deactivateWeb3, user } = useMoralis();
const router = useRouter();
const [ name, setName ] = useState('');
const [ description, setDescription ] = useState('');
const [ file, setFile ] = useState(null);
useEffect(() => {
if(!isWeb3Enabled) {
router.push('/')
}
}, [isWeb3Enabled]);
const onSubmit = async (e) => {
e.preventDefault();
try {
const file1 = new Moralis.File(file.name, file);
await file1.saveIPFS();
const file1url = file1.ipfs();
const metadata = {
name,
description,
image: file1url
}
const file2 = new Moralis.File(`${name}metadata.json`, {
base64: Buffer.from(JSON.stringify(metadata)).toString('base64')
});
await file2.saveIPFS();
const metadataurl = file2.ipfs();
/* useWeb3Contract({
abi: abi,
contractAddress: contractAddress,
functionName: 'mint',
params: {
_uri: metadataurl,
},
}) */
const contract = new web3.eth.Contract(abi, ContractAddress);
const response = await contract.methods
.mint(metadataurl)
.send({ from: user.get('ethAddress') });
const tokenId = response.events.Transfer.returnValues.tokenId;
alert(`NFT Minted Successfully. Contract Address - ${contractAddress} with a token ID of: ${tokenId}`)
} catch (error) {
console.error(error);
alert('Something went wrong');
}
};
return (
<div className="flex w-screen h-screen items-center justify-center">
<form onSubmit={onSubmit}>
<div className="w-[100px] h-[50px]">
<input
type="text"
className=" border-[1px] p-2 border-black text-lg w-[300px]"
placeholder="Document Name"
value={name}
onChange={e => setName(e.target.value)}></input>
</div>
<div className="w-[100px] h-[50px] mt-3">
<input
type="text"
className=" border-[1px] p-2 border-black text-lg w-[300px]"
placeholder="Description"
value={description}
onChange={e => setDescription(e.target.value)}></input>
</div>
<div className="w-[100px] h-[50px] mt-3">
<input
type="file"
className="border-[1px] p-2 border-black text-lg w-[300px]"
onChange={(e) => setFile(e.target.files[0])}></input>
</div>
<button type="submit" className="mt-5 w-full bg-green-700 text-white text-xl rounded-xl animate-bounce">Mint!</button>
<button onClick={deactivateWeb3} className="mt-5 w-full bg-red-700 text-white text-xl rounded-xl">LOGOUT</button>
</form>
</div>
)
}
Any ideas or direction would be super helpful, thank you in advance!