Vanilla Boilerplate Code Problem

Moralis General
#1

Hey Everyone!

I want to apologize in advance regarding my ‘problem’, since it possibly is something quite easy to solve…
Nevertheless I can’t find the solution so maybe someone here can help me out!

I’ve been copying code from the Moralis tutorial: Minting and Selling NFTs Without Paying Gas Fees! NFT Minter Programming Tutorial, I’ve following the same steps, only thing I didn’t do was copying the html layout, otherwise the code is exact the same. Nevertheless I’m getting 3 errors in the console and my image file doesn’t upload…

I’ll show you my code and a screenshot in which you can see the errors.

Thanks in advance! :slight_smile:

MAIN.JS:

/** Connect to Moralis server */
const serverUrl = "https://phnjtrirzatk.usemoralis.com:2053/server";
const appId = "OdLsa9pZ3pPgyn0PLkb4QVWoNIuXBejLlKjYwHao";
Moralis.start({ serverUrl, appId });

/** Add from here down */
async function login() {
  let user = Moralis.User.current();
  if (!user) {
   try {
      user = await Moralis.authenticate({ signingMessage: "Hello World!" })
      initApp()
      document.querySelector("#app").style.display = "block";
   } catch(error) {
     console.log(error)
   }
  }
  else {
    initApp()
  }
}

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

async function submit(){
        //Get image data
        const input = document.querySelector("#input_image");
        let data = input.files[0];
        const imageFile = new Moralis.File(date.name, data);
        await imageFile.saveIPFS();
        let imageHash = imageFile.hash();
        console.log(imageHash)
        console.log(imageFile.ipfs())
        //Upload imag to IPFS
        //Create metadata with image hash & data
        //Upload to Rarible (plugin)
}

login();

INDEX.HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Vanilla Boilerplate</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.css" rel="stylesheet"
/>
<style>
    #app{
        display: none;
    }        
</style>
  </head>

<body>
   </div class="container">
      <div class="row">
         <div class="col-md-6 offset-md-3">
             <div class="form_element">
                <input class="form-control" type="text" id="input_name" name="name" placeholder="NFT name">
            </div>
            <div class="form_element">
             <input class="form-control" type="text" id="input_description" name="name" placeholder="NFT description">
            </div>
            <div class="form_element">
             <input class="form-control" type="file" accept="image/png, image/jpeg" id="input_image" name="image">
               </div>
               <div class="form_element">
                <button class="btn btn-primary btn-lg btn-block" id="submit_button">Submit</button>
                  </div>
            </div>
         </div>
       </div>
    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>

Screenshot 2022-01-05 at 12.05.30

#2

if this is the line that gives that error, it means that it didn’t find a html element with the id app

#3

I tried to delete the line, but when I submit an image it doesn’t display in the console. :confused:

#4

http://127.0.0.1:5500/index.html

#5

that is a local link on local host what you pasted there

#6

Would you suggest to just start the tutorial over, since it’s not working?

#7

You should learn how to fix the problems, you may get in similar problem when you start over

1 Like
#8

Fair enough, do you have any recommendations for other sources/forums since you don’t see the problem yourself?

#9

try to narrow the problem, to what line it is, what it is causing it

#10

Ok I’ll try to do that, thank you for responding! :slight_smile: