Use POST form instead of XHR

This allows to send files without having
to configure CORS.

Author: ayufan

calibration.html

@@ -1034,6 +1034,14 @@ <h2>Fixing persistent dimensional accuracy after X/Y/Z steps per unit have been
         <p>One final measure, that is the least desirable, is to design parts to be printed bigger or smaller to compensate. This is a band aid approach and falls apart very quickly once we print geometry designed by other people.</p>
 
     </div>
+
+    <form style="display: none" name="octoprintForm" id="octoprintForm" action="#" method="post" enctype="multipart/form-data" target="_blank">
+        <input type="file" name="file"/>
+        <input type="hidden" name="apikey" value=""/>
+        <input type="hidden" name="path" value="TeachingTechYT"/>
+        <input type="hidden" name="select" value="true"/>
+        <input type="hidden" name="print" value="true"/>
+    </form>
 </div>
 <div id="up"></div>
 <div id="footer"></div>

js/createform.js

@@ -340,15 +340,8 @@ var downloadGcodeHtml = /*html*/ `<h4>Download</h4>
 <div class="octoprintExp">
     <label>Configure Octoprint:</label>
     <ul>
-        <li>Get API Key go to <b>User Settings > Application Keys</b> and manually generate new application key.</li>
-        <li>Enable CORS support by going to <b>OctoPrint Settings > API</b> and checking <b>Allow Cross Origin Resource Sharing (CORS)</b>. Restart afterwards</li>
-        <li>Restart afterwards</li>
-    </ul>
-
-    <label>Configure Moonraker if used with Klipper:</label>
-    <ul>
-        <li>As part of the <a href="https://moonraker.readthedocs.io/en/latest/configuration/#authorization">[authorization] config</a>
-            add to <b>cors_domains:</b> the <b><script>document.write(window.location.origin);</script></b>.</li>
+        <li>Login to your Octoprint</li>
+        <li>or get API Key go to <b>User Settings > Application Keys</b> and manually generate new application key.</li>
         <li>Restart afterwards</li>
     </ul>
 </div>

js/gcodeprocessing.js

@@ -678,46 +678,11 @@ function uploadGcode(form, fileName) {
     var url = form.octoprint_url.value.replace(/\/$/, '');
     url += "/api/files/local";
 
-    // this detects a `mixed-context` scenario:
-    // sending request to `http:` when connected via `https:` is not possible
-    if (window.location.protocol == "https:" && url.toLowerCase().startsWith("http:")) {
-        httpUrl = window.location.href.replace('https:', 'http:');
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(new File([output], fileName, {type : 'text/plain'}));
 
-        alert("Your local Octoprint/Moonraker uses `http://`. " +
-              "You need to open the `" + httpUrl + "` instead");
-        return;
-    }
-
-    const formData = new FormData();
-    formData.append("file", new Blob([output], {type : 'text/plain'}), fileName);
-    formData.append("path", "TeachingTechYT");
-    formData.append("select", "true");
-    formData.append("print", "true");
-
-    fetch(url, {
-        method: "POST",
-        body: formData,
-        headers: {
-            'X-Api-Key': form.octoprint_key.value
-        }
-    })
-    .then(response => {
-        if (response.ok) {
-            response.json().then(data => {
-                if (data.print_started) {
-                    alert("Successfully uploaded and started print from " + fileName);
-                } else {
-                    alert("Successfully uploaded, but print was not started from " + fileName);
-                }
-            });
-        } else {
-            alert("Failed to upload due to " + response.statusText);
-        }
-    })
-    .catch((error) => {
-       alert("Failed to upload due to an error. Possible causes:\n" +
-        "- CORS not configured properly\n" +
-        "- url does not start with `http://` or `https://`\n" +
-        "\n" + error);
-    });
+    document.octoprintForm.action = url;
+    document.octoprintForm.file.files = dataTransfer.files;
+    document.octoprintForm.apikey.value = form.octoprint_key.value;
+    document.octoprintForm.submit();
 }