Vuejs upload minttoken ipfs vuetify

Moralis General
#1

Hi, im implementing the upload and mint methods in a vuejs nft proyect, but i have some errors,
here is my code:

<template>
    <v-container>
        <h1>Create your NFT 721:</h1>
        <v-form v-model="valid">
            <v-container v-model="minteo">
                <v-row>
                    <v-col
                    cols="12"
                    md="4"
                     >
                        <v-text-field
                        v-model="name"
                        :rules="nameRules"
                        :counter="10"
                        label="Name"
                        required
                        ></v-text-field>
                    </v-col>

                    <v-col
                    cols="12"
                    md="4"
                    >
                        <v-text-field
                            type="text"
                            v-model="description"
                            :rules="nameRules"
                            :counter="120"
                            label="Description"
                            required
                        ></v-text-field>
                    </v-col>

                    <v-col
                    cols="12"
                    md="4"
                    >
                        <v-file-input 
                            v-model="archivo"
                            label="Sube tu marca"
                        ></v-file-input>
                    </v-col>
                </v-row>

            </v-container>
        </v-form>
        <div>
            <v-btn v-on:click="upload()" id="btn">Registrar Marca</v-btn>
        </div>
    </v-container>
</template>

<script>

    import Moralis from 'moralis';

    const serverUrl = "...";
    const appId = "....";

    Moralis.start({ serverUrl, appId });


    const nft_contract_address = ".....";

   const web3 = new Web3(window.ethereum);
    
    export default {
        name: 'mint-e', 

        data() {
            return {
                name: "",
                description: "",
                archivo: ""
            }
        },

        methods:{

            async upload() {
            const fileInput = this.archivo;

            const data = fileInput.files[0];
            const imageFile = new Moralis.File(data.name, data);
            await imageFile.saveIPFS();
            const imageURI = imageFile.ipfs();
            const metadata = {
                name: this.name.value,
                description: this.description.value,
                image: imageURI,
            };
            const metadataFile = new Moralis.File("metadata.json", {
                base64: btoa(JSON.stringify(metadata)),
             });
            await metadataFile.saveIPFS();
            const metadataURI = metadataFile.ipfs();
            const txt = await mintToken(metadataURI).then(notify);
            },

            async mintToken(_uri) {
                const encodedFunction = web3.eth.abi.encodeFunctionCall({
                    name: "mintToken",
                    type: "function",
                    inputs: [{
                        type: "string",
                        name: "tokenURI",
                     }, ],
                }, [_uri]);

                const transactionParameters = {
                    to: nft_contract_address,
                    from: ethereum.selectedAddress,
                    data: encodedFunction,
                };
            
                const txt = await ethereum.request({
                    method: "eth_sendTransaction",
                    params: [transactionParameters],
                });
                
                return txt;
            },
            //    NFT MINTING TEST 

            async notify(_txt) {
                document.getElementById(
                "resultSpace"
                ).innerHTML = `<input disabled = "true" id="result" type="text" class="form-control" placeholder="Description" aria-label="URL" aria-describedby="basic-addon1" value="Your NFT was minted in transaction ${_txt}">`;
            }
            // END NFT MINTING

        }



    }

</script>

The errors i get:

76:21 error ‘Web3’ is not defined no-undef
113:19 error ‘txt’ is assigned a value but never used no-unused-vars
113:31 error ‘mintToken’ is not defined no-undef
113:59 error ‘notify’ is not defined no-undef
128:27 error ‘ethereum’ is not defined no-undef
132:35 error ‘ethereum’ is not defined no-undef

help please,

#2

Which tutorial are you following?

These are general errors, you’re trying to use variables that haven’t been declared/defined.

E.g. for ‘Web3’ is not defined, you need to import web3 at the top along with Moralis.

import Web3 from 'web3';

For ethereum, you need to use window.ethereum e.g. await window.ethereum.request.

#3

Havent found any vuejs video, so i found this one in js:

i made the changes, still some errors:
115:23 error ‘txt’ is assigned a value but never used no-unused-vars
115:35 error ‘mintToken’ is not defined no-undef
115:63 error ‘notify’ is not defined no-undef
130:25 error ‘nft_contract_address’ is not defined no-undef
131:27 error ‘ethereum’ is not defined no-undef
135:35 error ‘ethereum’ is not defined no-undef

#4

115:35 error ‘mintToken’ is not defined no-undef
115:63 error ‘notify’ is not defined no-undef
130:25 error ‘nft_contract_address’ is not defined no-undef
131:27 error ‘ethereum’ is not defined no-undef
135:35 error ‘ethereum’ is not defined no-undef

You need to go over each of these errors (you can simply comment out txt if you’re not using it, it’s not really an error) and do some debugging with your code. I already mentioned how to fix the ethereum errors:

For ethereum, you need to use window.ethereum e.g. await window.ethereum.request.

1 Like
#5

Thanks, I made some changes, just one more error, but i think is already defined in the method
Error:

116:35 error ‘mintToken’ is not defined no-undef

:heavy_multiplication_x: 1 problem (1 error, 0 warnings)