zvalentine22/jqueryUploadGcode.html

## jqueryUploadGcode.html
<html>
   <head>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   </head>
   <body>
   <style>
      #fileselector, #upload {display:  none;}
   </style>
   <form id="fileform">
      <input type="button" id="connect" value="Connect">
      <input type="file" id="fileselector" accept=".gcode"><br>
      <input type="button" id="upload" value="Upload">
   </form>
   <script type="text/javascript">

      // Set Printer IP:-------------
      var printer_ip = "192.168.0.47";
      // ----------------------------

      var base_url = "http://" + printer_ip + ":8080/api/v1";
      var token;

      // request access token from printer
      $("#connect").click(function(){
         $.ajax({
            url: base_url + "/connect",
            type: "post",
            success: function(data, status){
               console.log("Token: " + data.token + "\nStatus: " + status)
               token = data.token;
               $("#fileselector").show();
               $("#connect").hide();
            },
            error: function(data, status){
               alert("Data: " + data.responseText + "\nStatus: " + status)
            }
         });
      });

      // Reveal upload button upon file selection
      $("#fileselector").change(function(){
         $("#upload").show();
      });

      // Attempt to upload file
      $("#upload").click(function(){
         if (token){
            var data = new FormData();
            data.append('token',token);
            data.append('file', $('#fileselector')[0].files[0]);
            $.ajax({
               url: base_url + '/upload',
               type: 'post',
               data: data,
               processData: false,
               contentType: false,
               success: function(data, status){
                  console.log(data.response);
                  alert("Data: " + data.responseText + "\nStatus: " + status)
               },
               error: function(data, status){
                  alert("Data: " + data.responseText + "\nStatus: " + status)
               }
            });
         };
      });
   </script>

   </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	</head>
	<body>
	<style>
	#fileselector, #upload {display: none;}
	</style>
	<form id="fileform">
	<input type="button" id="connect" value="Connect">
	<input type="file" id="fileselector" accept=".gcode"><br>
	<input type="button" id="upload" value="Upload">
	</form>
	<script type="text/javascript">

	// Set Printer IP:-------------
	var printer_ip = "192.168.0.47";
	// ----------------------------

	var base_url = "http://" + printer_ip + ":8080/api/v1";
	var token;

	// request access token from printer
	$("#connect").click(function(){
	$.ajax({
	url: base_url + "/connect",
	type: "post",
	success: function(data, status){
	console.log("Token: " + data.token + "\nStatus: " + status)
	token = data.token;
	$("#fileselector").show();
	$("#connect").hide();
	},
	error: function(data, status){
	alert("Data: " + data.responseText + "\nStatus: " + status)
	}
	});
	});

	// Reveal upload button upon file selection
	$("#fileselector").change(function(){
	$("#upload").show();
	});

	// Attempt to upload file
	$("#upload").click(function(){
	if (token){
	var data = new FormData();
	data.append('token',token);
	data.append('file', $('#fileselector')[0].files[0]);
	$.ajax({
	url: base_url + '/upload',
	type: 'post',
	data: data,
	processData: false,
	contentType: false,
	success: function(data, status){
	console.log(data.response);
	alert("Data: " + data.responseText + "\nStatus: " + status)
	},
	error: function(data, status){
	alert("Data: " + data.responseText + "\nStatus: " + status)
	}
	});
	};
	});
	</script>

	</body>
	</html>