Thank you!
Im using chrome and have updated itâŚwhat browser where you using?
I am using brave and live server extension to load app
Does Moralis and Google not play together well haha⌠could be a reason some of my other apps dont work so well either 
Thank you for your time iâll try brave browser and see how it goes.
Moralis should also work on google chrome, not sure what is the exact reason why your other apps are not working.
Its doing the same on the brave browser too âŚwhen the submit btn is pressed it seems to go to another pahe with a # hashtag at the end of the url so it seems to be directing it to another page so could it be faulty html markup somehow conflicting with it? Im clutching at straws now tho
Multiverse by HTML5 UP </style>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<h1>
<a href="index.html"><strong>Multiverse</strong> by HTML5 UP</a></h1>
<nav>
<ul>
<li><a href="#footer" class="icon solid fa-info-circle">Start Minting Here</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<div id="main">
<article class="thumb">
<a href="images/fulls/01.jpg" class="image"><img src="images/thumbs/01.jpg" alt="" /></a>
<h2>Magna feugiat lorem</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/02.jpg" class="image"><img src="images/thumbs/02.jpg" alt="" /></a>
<h2>Nisl adipiscing</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/03.jpg" class="image"><img src="images/thumbs/03.jpg" alt="" /></a>
<h2>Tempus aliquam veroeros</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/04.jpg" class="image"><img src="images/thumbs/04.jpg" alt="" /></a>
<h2>Aliquam ipsum sed dolore</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/05.jpg" class="image"><img src="images/thumbs/05.jpg" alt="" /></a>
<h2>Cursis aliquam nisl</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/06.jpg" class="image"><img src="images/thumbs/06.jpg" alt="" /></a>
<h2>Sed consequat phasellus</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/07.jpg" class="image"><img src="images/thumbs/07.jpg" alt="" /></a>
<h2>Mauris id tellus arcu</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/08.jpg" class="image"><img src="images/thumbs/08.jpg" alt="" /></a>
<h2>Nunc vehicula id nulla</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/09.jpg" class="image"><img src="images/thumbs/09.jpg" alt="" /></a>
<h2>Neque et faucibus viverra</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/10.jpg" class="image"><img src="images/thumbs/10.jpg" alt="" /></a>
<h2>Mattis ante fermentum</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/11.jpg" class="image"><img src="images/thumbs/11.jpg" alt="" /></a>
<h2>Sed ac elementum arcu</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/fulls/12.jpg" class="image"><img src="images/thumbs/12.jpg" alt="" /></a>
<h2>Vehicula id nulla dignissim</h2>
<p>Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
</div>
<!-- Footer -->
<footer id="footer" class="panel">
<div class="inner_split" id="mint_section">
<div>
<section>
<h2>Magna feugiat sed adipiscing</h2>
<p>Nulla consequat, ex ut suscipit rutrum, mi dolor tincidunt erat, et scelerisque turpis ipsum eget quis orci mattis aliquet. Maecenas fringilla et ante at lorem et ipsum. Dolor nulla eu bibendum sapien. Donec non pharetra dui. Nulla consequat, ex ut suscipit rutrum, mi dolor tincidunt erat, et scelerisque turpis ipsum.</p>
</section>
<section>
<h2>Follow me on ...</h2>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
</ul>
</section>
<p class="copyright">
© Unttled. Design: <a href="http://html5up.net">HTML5 UP</a>.
</p>
</div>
<div>
<section>
<h2>Mint A Token, Audio or NFT</h2>
<form method="post" action="#">
<div class="fields">
<div class="field half">
<input type="text" name="name" id="input_name" placeholder="Name of Token, Audio File or NFT" />
</div>
<div class="field half">
<input type="text" name="symbol" id="input_symbol" placeholder="Symbol or Genre" />
</div>
<div class="field half">
<input type="file" id="input_file" accept="multipart/form-data"/>
</div>
<div class="field">
<textarea name="message" id="input_description" rows="4" placeholder="Describe Your Creation"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" id="submit_button" value="Mint Me" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
</section>
</div>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<!-- MDB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.js"></script>
</body>
Itâs old html boilerplate code but has some freakish .js files like jquery etc that could be playing with it but i went thru looking for anything that had submit associated with any code and only came across css files so should be ok?
How does your main.js file looks like?
Here:
/* Moralis init code */
const serverUrl = âhttps://vkuvhegtzzua.usemoralis.com:2053/serverâ;
const appId = âq7Sa000f4q3E6YpgVoJugVDxVHIQZeZjrHUvW9Ueâ;
Moralis.start({ serverUrl, appId });
/* Ahentication code */
async function login() {
let user = Moralis.User.current();
if (!user) {
try {
user = await Moralis.authenticate({ signingMessage: âSign In with Metamask to start your journey. 
â })
console.log(âlogged in user:â, user)
console.log(user.get(âethAddressâ))
initApp()
} catch(error) {
console.log(error);
}
}
else {
initApp()
}
}
function initApp() {
document.querySelector("#wrapper").style.display = âblockâ;
document.querySelector("#submit_button").onclick = submit;
}
async function submit() {
// Get image data
const input = document.querySelector("#input_file");
let data = input.files[0];
//Upload file to IPFS
const imageFile = new Moralis.File(data.name, data);
await imageFile.saveIPFS();
console.log(imageFile.ipfs(), imageFile.hash())
let imageHash = imageFile.hash();
console.log(imageHash)
console.log(imageFile.ipfs())
// Create metadata with file hash & data
let metadata = {
name: document.querySelector("#input_name").value,
description: document.querySelector("#input_description").value,
image: "/ipfs/" + imageHash
}
// Upload metadata to IPFS
const jsonFile = new Moralis.File("metadata.json", {base64: btoa(JSON.stringify(metadata))});
jsonFile.saveIPFS();
let metadataHash = jsonFile.hash();
console.log(metadataHash)
//Upload to Rarable
let res = await Moralis.Plugins.rarable
}
login();
// Main body functions
(function($) {
var $window = $(window),
$body = $('body'),
$wrapper = $('#wrapper');
// Breakpoints.
breakpoints({
xlarge: [ '1281px', '1680px' ],
large: [ '981px', '1280px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ null, '480px' ]
});
// Hack: Enable IE workarounds.
if (browser.name == 'ie')
$body.addClass('ie');
// Touch?
if (browser.mobile)
$body.addClass('touch');
// Transitions supported?
if (browser.canUse('transition')) {
// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});
// Prevent transitions/animations on resize.
var resizeTimeout;
$window.on('resize', function() {
window.clearTimeout(resizeTimeout);
$body.addClass('is-resizing');
resizeTimeout = window.setTimeout(function() {
$body.removeClass('is-resizing');
}, 100);
});
}
// Scroll back to top.
$window.scrollTop(0);
// Panels.
var $panels = $('.panel');
$panels.each(function() {
var $this = $(this),
$toggles = $('[href="#' + $this.attr('id') + '"]'),
$closer = $('<div class="closer" />').appendTo($this);
// Closer.
$closer
.on('click', function(event) {
$this.trigger('---hide');
});
// Events.
$this
.on('click', function(event) {
event.stopPropagation();
})
.on('---toggle', function() {
if ($this.hasClass('active'))
$this.triggerHandler('---hide');
else
$this.triggerHandler('---show');
})
.on('---show', function() {
// Hide other content.
if ($body.hasClass('content-active'))
$panels.trigger('---hide');
// Activate content, toggles.
$this.addClass('active');
$toggles.addClass('active');
// Activate body.
$body.addClass('content-active');
})
.on('---hide', function() {
// Deactivate content, toggles.
$this.removeClass('active');
$toggles.removeClass('active');
// Deactivate body.
$body.removeClass('content-active');
});
// Toggles.
$toggles
.removeAttr('href')
.css('cursor', 'pointer')
.on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$this.trigger('---toggle');
});
});
// Global events.
$body
// .on('click', function(event) {
// if ($body.hasClass('content-active')) {
// event.preventDefault();
// event.stopPropagation();
// $panels.trigger('---hide');
// }
// });
$window
.on('keyup', function(event) {
if (event.keyCode == 27
&& $body.hasClass('content-active')) {
event.preventDefault();
event.stopPropagation();
$panels.trigger('---hide');
}
});
// Header.
var $header = $('#header');
// Links.
$header.find('a').each(function() {
var $this = $(this),
href = $this.attr('href');
// Internal link? Skip.
if (!href
|| href.charAt(0) == '#')
return;
// Redirect on click.
$this
.removeAttr('href')
.css('cursor', 'pointer')
.on('click', function(event) {
event.preventDefault();
event.stopPropagation();
window.location.href = href;
});
});
// Footer.
var $footer = $('#footer');
// Copyright.
// This basically just moves the copyright line to the end of the *last* sibling of its current parent
// when the "medium" breakpoint activates, and moves it back when it deactivates.
$footer.find('.copyright').each(function() {
var $this = $(this),
$parent = $this.parent(),
$lastParent = $parent.parent().children().last();
breakpoints.on('<=medium', function() {
$this.appendTo($lastParent);
});
breakpoints.on('>medium', function() {
$this.appendTo($parent);
});
});
// Main.
var $main = $('#main');
// Thumbs.
$main.children('.thumb').each(function() {
var $this = $(this),
$image = $this.find('.image'), $image_img = $image.children('img'),
x;
// No image? Bail.
if ($image.length == 0)
return;
// Image.
// This sets the background of the "image" <span> to the image pointed to by its child
// <img> (which is then hidden). Gives us way more flexibility.
// Set background.
$image.css('background-image', 'url(' + $image_img.attr('src') + ')');
// Set background position.
if (x = $image_img.data('position'))
$image.css('background-position', x);
// Hide original img.
$image_img.hide();
});
// Poptrox.
$main.poptrox({
baseZIndex: 20000,
caption: function($a) {
var s = '';
$a.nextAll().each(function() {
s += this.outerHTML;
});
return s;
},
fadeSpeed: 300,
onPopupClose: function() { $body.removeClass('modal-active'); },
onPopupOpen: function() { $body.addClass('modal-active'); },
overlayOpacity: 0,
popupCloserText: '',
popupHeight: 150,
popupLoaderText: '',
popupSpeed: 300,
popupWidth: 150,
selector: '.thumb > a.image',
usePopupCaption: true,
usePopupCloser: true,
usePopupDefaultStyling: false,
usePopupForceClose: true,
usePopupLoader: true,
usePopupNav: true,
windowMargin: 50
});
// Hack: Set margins to 0 when 'xsmall' activates.
breakpoints.on('<=xsmall', function() {
$main[0]._poptrox.windowMargin = 0;
});
breakpoints.on('>xsmall', function() {
$main[0]._poptrox.windowMargin = 50;
});
})(jQuery);
you can see here how to post code on forum:
/* Moralis init code */
const serverUrl = "https://vkuvhegtzzua.usemoralis.com:2053/server";
const appId = "q7Sa000f4q3E6YpgVoJugVDxVHIQZeZjrHUvW9Ue";
Moralis.start({ serverUrl, appId });
/* Ahentication code */
async function login() {
let user = Moralis.User.current();
if (!user) {
try {
user = await Moralis.authenticate({ signingMessage: "Sign In with Metamask to start your journey. đ¤đź" })
console.log("logged in user:", user)
console.log(user.get("ethAddress"))
initApp()
} catch(error) {
console.log(error);
}
}
else {
initApp()
}
}
function initApp() {
document.querySelector("#wrapper").style.display = "block";
document.querySelector("#submit_button").onclick = submit;
}
async function submit() {
// Get image data
const input = document.querySelector("#input_file");
let data = input.files[0];
//Upload file to IPFS
const imageFile = new Moralis.File(data.name, data);
await imageFile.saveIPFS();
console.log(imageFile.ipfs(), imageFile.hash())
let imageHash = imageFile.hash();
console.log(imageHash)
console.log(imageFile.ipfs())
// Create metadata with file hash & data
let metadata = {
name: document.querySelector("#input_name").value,
description: document.querySelector("#input_description").value,
image: "/ipfs/" + imageHash
}
// Upload metadata to IPFS
const jsonFile = new Moralis.File("metadata.json", {base64: btoa(JSON.stringify(metadata))});
jsonFile.saveIPFS();
let metadataHash = jsonFile.hash();
console.log(metadataHash)
//Upload to Rarable
let res = await Moralis.Plugins.rarable
}
login();
// Main body functions
(function($) {
var $window = $(window),
$body = $('body'),
$wrapper = $('#wrapper');
// Breakpoints.
breakpoints({
xlarge: [ '1281px', '1680px' ],
large: [ '981px', '1280px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ null, '480px' ]
});
// Hack: Enable IE workarounds.
if (browser.name == 'ie')
$body.addClass('ie');
// Touch?
if (browser.mobile)
$body.addClass('touch');
// Transitions supported?
if (browser.canUse('transition')) {
// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});
// Prevent transitions/animations on resize.
var resizeTimeout;
$window.on('resize', function() {
window.clearTimeout(resizeTimeout);
$body.addClass('is-resizing');
resizeTimeout = window.setTimeout(function() {
$body.removeClass('is-resizing');
}, 100);
});
}
// Scroll back to top.
$window.scrollTop(0);
// Panels.
var $panels = $('.panel');
$panels.each(function() {
var $this = $(this),
$toggles = $('[href="#' + $this.attr('id') + '"]'),
$closer = $('<div class="closer" />').appendTo($this);
// Closer.
$closer
.on('click', function(event) {
$this.trigger('---hide');
});
// Events.
$this
.on('click', function(event) {
event.stopPropagation();
})
.on('---toggle', function() {
if ($this.hasClass('active'))
$this.triggerHandler('---hide');
else
$this.triggerHandler('---show');
})
.on('---show', function() {
// Hide other content.
if ($body.hasClass('content-active'))
$panels.trigger('---hide');
// Activate content, toggles.
$this.addClass('active');
$toggles.addClass('active');
// Activate body.
$body.addClass('content-active');
})
.on('---hide', function() {
// Deactivate content, toggles.
$this.removeClass('active');
$toggles.removeClass('active');
// Deactivate body.
$body.removeClass('content-active');
});
// Toggles.
$toggles
.removeAttr('href')
.css('cursor', 'pointer')
.on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$this.trigger('---toggle');
});
});
// Global events.
$body
// .on('click', function(event) {
// if ($body.hasClass('content-active')) {
// event.preventDefault();
// event.stopPropagation();
// $panels.trigger('---hide');
// }
// });
$window
.on('keyup', function(event) {
if (event.keyCode == 27
&& $body.hasClass('content-active')) {
event.preventDefault();
event.stopPropagation();
$panels.trigger('---hide');
}
});
// Header.
var $header = $('#header');
// Links.
$header.find('a').each(function() {
var $this = $(this),
href = $this.attr('href');
// Internal link? Skip.
if (!href
|| href.charAt(0) == '#')
return;
// Redirect on click.
$this
.removeAttr('href')
.css('cursor', 'pointer')
.on('click', function(event) {
event.preventDefault();
event.stopPropagation();
window.location.href = href;
});
});
// Footer.
var $footer = $('#footer');
// Copyright.
// This basically just moves the copyright line to the end of the *last* sibling of its current parent
// when the "medium" breakpoint activates, and moves it back when it deactivates.
$footer.find('.copyright').each(function() {
var $this = $(this),
$parent = $this.parent(),
$lastParent = $parent.parent().children().last();
breakpoints.on('<=medium', function() {
$this.appendTo($lastParent);
});
breakpoints.on('>medium', function() {
$this.appendTo($parent);
});
});
// Main.
var $main = $('#main');
// Thumbs.
$main.children('.thumb').each(function() {
var $this = $(this),
$image = $this.find('.image'), $image_img = $image.children('img'),
x;
// No image? Bail.
if ($image.length == 0)
return;
// Image.
// This sets the background of the "image" <span> to the image pointed to by its child
// <img> (which is then hidden). Gives us way more flexibility.
// Set background.
$image.css('background-image', 'url(' + $image_img.attr('src') + ')');
// Set background position.
if (x = $image_img.data('position'))
$image.css('background-position', x);
// Hide original img.
$image_img.hide();
});
// Poptrox.
$main.poptrox({
baseZIndex: 20000,
caption: function($a) {
var s = '';
$a.nextAll().each(function() {
s += this.outerHTML;
});
return s;
},
fadeSpeed: 300,
onPopupClose: function() { $body.removeClass('modal-active'); },
onPopupOpen: function() { $body.addClass('modal-active'); },
overlayOpacity: 0,
popupCloserText: '',
popupHeight: 150,
popupLoaderText: '',
popupSpeed: 300,
popupWidth: 150,
selector: '.thumb > a.image',
usePopupCaption: true,
usePopupCloser: true,
usePopupDefaultStyling: false,
usePopupForceClose: true,
usePopupLoader: true,
usePopupNav: true,
windowMargin: 50
});
// Hack: Set margins to 0 when 'xsmall' activates.
breakpoints.on('<=xsmall', function() {
$main[0]._poptrox.windowMargin = 0;
});
breakpoints.on('>xsmall', function() {
$main[0]._poptrox.windowMargin = 50;
});
})(jQuery);```
Better?can you add some console log line before and after the line that you think that generates that error?
Yeah i did that and will stop before with the data ready to send and after the âawaitâ line just jumps to the page error and status 405?`
just noticed this, seems like a typo
const imageFile = new Moralis.File(data.name, data);
await imageFile.saveIPFS();
console.log(imageFile.ipfs(), imageFile.hash())
let imageHash = imageFile.hash();
console.log(imageHash)
console.log(imageFile.ipfs())`
can you identify the line that gets the error and add a code snippet with it?
also, can you look in network tab in the browser to see what request generates that error?
yeah thats new code that is dealing with the result that comes back but pointless code until i can get the hash back from Moralis.File(). So just had to comment out until i get to that point in the code.
it looks like index.html doesnât load
Yeah I was on the same think pattern but why, Im thinking it could be in the main.js thats doing something funky like this last line of the jquery is interestingâŚmaybe?
// Redirect on click.
$this
.removeAttr('href')
.css('cursor', 'pointer')
.on('click', function(event) {
event.preventDefault();
event.stopPropagation();
window.location.href = href;
});```Not sure why this seemed to work but decided to change the form method from post to get and things started working sort of or at least getting back a IPFS hash and displaying it with metadata??? Refer (https://www.w3schools.com/html/html_forms_attributes.asp).
Although the form method shouldâve been super seeded by the âsubmitâ part of the form but in my case it wasnât doing that for whatever reason???
<form method="get" action="#">
<div class="fields">
<div class="field half">
<input type="text" name="name" id="input_name" placeholder="Name of Token, Audio File or NFT" required/>
</div>
<div class="field half">
<input type="text" name="symbol" id="input_symbol" placeholder="Symbol or Genre" required/>
</div>
<div class="field half">
<input type="file" id="input_file" accept="multipart/form-data" required/>
</div>
<div class="field">
<textarea name="description" id="input_description" rows="4" placeholder="Describe Your Creation" required></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" id="submit_button" value="Mint Me" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
more investigation is needed tho so will keep posting to hopefully help others who may have this issue
Your HTML seems ok when I tried.
Maybe you try removing/commenting your js code, whichever is not required for your app, so you can see which is causing the error.