Problems saving to IPFS in Rarible Clone

Right at this timestamp

my chrome console spits out

main.js:97 Uncaught (in promise) TypeError: nftFile.saveIPFS is not a function
    at HTMLButtonElement.createItem (main.js:97)

The code is more or less verbatim
line 97 is

await nftFile.saveIPFS();

It’s probably unnecessary but i’ll post the whole function as is atm

createItem = async () => {

    if (createItemFile.files.length == 0){
        alert("Please select a file!");
        return;
    } else if (createItemNameField.value.lenth == 0){
        alert("Please give the item a name!");
        return;
    }

    const nftFile = new Moralis.File("nftFile.jpg", createItemFile.files[0]);
    await nftFile.saveIPFS();

    const nftFilePath = nftFile.ipfs();
    const nftFileHash = nftFile.hash(); 

    const metadata = {
        name: createItemNameField.value,
        description: createItemDescriptionField.value,
        nftFilePath: nftFilePath,
        nftFileHash: nftFileHash
    };

    const nftFileMetadataFile = new Moralis.File("metadata.json", {base64 : btoa(JSON.stringify(metadata))});
    await nftFileMetadataFile.saveIPFS();

    const nftFileMetadataFilePath = nftFileMetadataFile.ipfs();
    const nftFileMetadataFileHash = nftFileMetadataFile.hash();

    // Simple syntax to create a new subclass of Moralis.Object.
    const Item = Moralis.Object.extend("Item");
    // Create a new instance of that class.
    const item = new Item();
    item.set("name", createItemNameField.value)
    item.set("description", createItemDescriptionField.value)
    item.set("nftFilePath", nftFilePath)
    item.set("nftFileHash", nftFileHash)
    item.set("MetadataFilePath", nftFileMetadataFilePath)
    item.set("MetadataFileHash", nftFileMetadataFileHash)
    await item.save();
    console.log(item)

}

Thanks!

I added a try-catch under the user avatar save button and added a avatar.saveIPFS() function because I knew this file was definitely being pulled in and working. And it failed (it tried and then caught and alerted me to the error). So I can only make the assumption that this is on the moralis end and not my mediocre coding. So in short somethings is up with .saveIPFS as far as I can tell. Anyone one else having an issue? I’m going to try initiate a new moralis server instance and see if that fixes things up.

Did you solve this problem by updating the server?

I just tested this with the latest server version and latest 2 versions of moralis sdk: 0.0.16 and 0.0.17, and in both versions, the saveIPFS function works.

Can you confirm that the Moralis file is correctly created (via the new Moralis.File function). Can you maybe log the input and output of that function? Like:

    console.log("input file", createItemFile.files[0]);
    const nftFile = new Moralis.File("nftFile.jpg", createItemFile.files[0]);
    console.log("moralis nftFile", nftFile);
    await nftFile.saveIPFS();

To check if both of these values are correct.

My guess is also that you are using an old version of the SDK.
I noticed that an old version were listed in the get started section, and in that version ipfs were not yet implemented.


I have now corrected the snippet to use the current version.

When developing I suggest you always use the latest version if the SDK and Web3

  <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
  <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

Did an update a restart - didn’t work, then created a fresh new server and updated the file with the new server detail - didn’t work.

Added the two console lines and got this.

input file File {name: "laserCAt2.jpg", lastModified: 1619105150870, lastModifiedDate: Thu Apr 22 2021 23:25:50 GMT+0800 (Australian Western Standard Time), webkitRelativePath: "", size: 317767, …}lastModified: 1619105150870lastModifiedDate: Thu Apr 22 2021 23:25:50 GMT+0800 (Australian Western Standard Time) {}name: "laserCAt2.jpg"size: 317767type: "image/jpeg"webkitRelativePath: ""__proto__: File
main.js:102 moralis nftFile ParseFile {_name: "nftFile.jpg", _url: undefined, _source: {…}, _previousSave: undefined, _data: undefined, …}_data: undefined_metadata: {}_name: "nftFile.jpg"_previousSave: undefined_requestTask: undefined_source: {format: "file", file: File, type: ""}_tags: {}_url: undefined__proto__: Object
main.js:103 Uncaught (in promise) TypeError: nftFile.saveIPFS is not a function
    at HTMLButtonElement.createItem (main.js:103)

in response to Capplequoppe I checked and I was using

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/moralis.js"></script>

I changed it, it worked!
Thanks guys!!

2 Likes

Hey Brutha man wanted to say Thank you first for the great tutorials.

some how I got these errors right in this section, hodlin me back a bit haha. here’s the code incae you can see anything from your end

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "../node_modules/@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "../node_modules/@openzeppelin/contracts/utils/Counters.sol";

contract Treetoken is ERC721 {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    constructor() ERC721("Treetoken", "TREE") {}

    struct Item {
        uint256 id;
        address creator;
        string uri;
    }

    mapping(uint256 => Item) public Items;

    function createItem(string memory uri) public returns (uint256) {
        _tokenIds.increment();
        uint256 newItemId = _tokenIds.current();
        _safeMint(msg.sender, newItemId);

        Items[newItemId] = Item(newItemId, msg.sender, uri);

        return newItemId;
    }

    function tokenURI(uint256 tokenId)
        public
        view
        override
        returns (string memory)
    {
        require(
            _exists(tokenId),
            "ERC721Metadata: URI query for nonexistent token"
        );

        return Items[tokenId].url;
    }
}

getting a error on the override. thinking this might just be a synatax error, but, I don’t see where. it’s reading Expected ‘{’ but got reserved keyword ‘override’

Cheers man!!

also here’s my server url https://4v9bdcxbhzcz.moralis.io:2053/server and getting a message “Could not find suitable configuration file.” did the truffle migrate --reset even and the 2_token_migration.js file. huh, interesting. thank you again and switched return Items[tokenId].url; to uri not L

EDIT: The documentation says that IPFS works out of the box now. Will continue with the tutorial. If I encounter problems will of course be back to the forum. haha…

Hi @Capplequoppe,
Great Tutorial, I am having an issue though, as IPFS config option is not showing In moralis. Why is that?

3 Likes

Same problem here, but I will do as you do and be back if it doesnt indeed work right out of box

1 Like

Hey @ibn5x, @Thomas , hope you guys are well.

Could you please provide your code in the following way?
https://forum.moralis.io/t/faq-how-to-post-code-in-the-forum/233/2

Carlos Z

Hey, thanks but actually I was able to solve the problem. Thank you for the prompt reply.

works right out of the box. Thanx