Use POST form instead of XHR

This allows to send files without having
to configure CORS.

Author: ayufan

calibration.html

@@ -1179,6 +1179,14 @@ <h2>Interpreting Results:</h2>
         <iframe loading="lazy" width="640" height="480" src="https://www.youtube.com/embed/CZC5n2J8k_c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         <p>You may wish to stop the print early if it is clear extrusion has ceased or become unreliable. This may prevent the need for disassembly of the extruder to clear the blockage.</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

@@ -471,16 +471,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>Restart afterwards</li>
+        <li>Login to your Octoprint from this browser</li>
+        <li>Or get API Key from <b>User Settings > Application Keys</b></li>
     </ul>
 </div>
 

js/gcodeprocessing.js

@@ -739,54 +739,20 @@ function uploadGcode(form, fileName) {
 
     // get only basename
     if (!fileName) {
-        fileName = form.description.value + ".gcode";
+        fileName = form.description.value;
     }
+    fileName += ".gcode";
     fileName = fileName.split('/').reverse()[0];
 
     // remove `/` from the end of URL
-    var url = form.octoprint_url.value.replace(/\/$/, '');
+    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:');
-
-        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");
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(new File([output], fileName, {type : 'text/plain'}));
 
-    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();
 }