[SOLVED] Rarible clone using react and moralis (use saveFile from useMoralisFile hook)


{onCreateItem} gets triggered when I’m Upload a NFT. But I’m getting the following error with

=> const nftFile = new Moralis.File(“nftFile.png”,file);

Error:
Createcomponent.js:24 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘File’)
at onCreateItem (Createcomponent.js:24)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
at executeDispatch (react-dom.development.js:8243)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
at processDispatchQueue (react-dom.development.js:8288)
at dispatchEventsForPlugins (react-dom.development.js:8299)
at react-dom.development.js:8508
at batchedEventUpdates$1 (react-dom.development.js:22396)
at batchedEventUpdates (react-dom.development.js:3745)
at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
at attemptToDispatchEvent (react-dom.development.js:6005)
at dispatchEvent (react-dom.development.js:5924)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at discreteUpdates$1 (react-dom.development.js:22413)
at discreteUpdates (react-dom.development.js:3756)
at dispatchDiscreteEvent (react-dom.development.js:5889)

Hi,
What does that console.log(file) show?

The file that I uploaded.

Update :
I’ve fixed that error

{
const fileIpfs= await saveFile(“nftFile.png”,file,{

saveIPFS:true

});

     console.log(fileIpfs);

         

     const nftFilePath = fileIpfs._ipfs;

    const nftFileHash=fileIpfs._hash;

      

  console.log(nftFileHash,nftFilePath);

      

const metadata = {

    name: filename,

    description: description,

    nftFilePath: nftFilePath,

    nftFileHash:nftFileHash,

};

const metadataFileIpfs= await saveFile("metadata.json", {base64 : btoa(JSON.stringify(metadata))},{

    saveIPFS:true

});

console.log(metadataFileIpfs);

 const nftFileMetaDataPath = metadataFileIpfs._ipfs;

 const nftFileMetaDataHash = metadataFileIpfs._hash;

 console.log(nftFileMetaDataHash,nftFileMetaDataPath); 

}
This will fix that error. Use saveFile from useMoralisFile hook.
Moralis.File will give an error with react form submission.

2 Likes