Failed to load resource: the server responded with a status of 405 ()

Hey guys getting an error from the server side not sending


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();
let imageHash = imageFile.hash();
console.log(imageHash)
console.log(imageFile.ipfs())

This is my javascript code, Im able to send info to ipfs but not getting anything back? What am I doing wrong here please. I have even started a new server on Moralis.io but getting this in return after submitting info from submit button on app.
Please help I’ve run out of idea’s. Thank You

what is the request that gets that error?

Asking for a hash from IPFS but get 405, from what my breakpoints are saying is it gets as far as the line “await imageFile.saveIPFS();”
but then next returns 405 error?

You code is correct. I tried running the same and it worked fine.
image

I looks like an error caused while launching in browser.

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 :face_with_symbols_over_mouth: 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">
								&copy; 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. :love_you_gesture:t3:” })
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.