I currently trying to implement an OverTheAir Update for my microcontroller. I found an example which I can use. The problem is I would like to use it without access to the internet. The problem it is written in JQuery and I did not work with JQery so far. Using JQuery does not work with the project since it has no internet access.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
<input type="file" name="update" />
<input type="submit" value="Update" />
</form>
<div id="prg">Fortschritt: 0%</div>
<script>
$("form").submit(function (e) {
e.preventDefault();
var form = $("#upload_form")[0];
var data = new FormData(form);
$.ajax({
url: "/update",
type: "POST",
data: data,
contentType: false,
processData: false,
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener(
"progress",
function (evt) {
if (evt.lengthComputable) {
var per = evt.loaded / evt.total;
$("#prg").html("progress: " + Math.round(per * 100) + "%");
}
},
false
);
return xhr;
},
success: function (d, s) {
console.log("success!");
},
error: function (a, b, c) {},
});
});
</script>
";
And I tryed to get the upload part with that but it seems I missing some properties or did set wrong parameters
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Upload</title>
<script>
async function uploadFile() {
let formData = new FormData();
formData.append("file", fileupload.files[0]);
await fetch("/upload", {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "same-origin", // no-cors, *cors, same-origin
cache: "default", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
"Content-Type": "application/json",
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: "follow", // manual, *follow, error
referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: formData, // body data type must match "Content-Type" header
});
alert("The file has been uploaded successfully.");
}
</script>
</head>
<body>
<p>Click on the "Choose File" button to upload a file:</p>
<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()">Upload</button>
</body>
</html>
I would like to upload the new firmware which is a .bin file does that require some special settings?
I am using this example: https://github.com/espressif/arduino-esp32/blob/master/libraries/ArduinoOTA/examples/OTAWebUpdater/OTAWebUpdater.ino
I modified it alittle bit so it can be used in the access point mode.
I Can post the modified code too but since it does not work with html code there should be no error since it works with the JQuery code.
(I posted that code here too: https://forum.arduino.cc/t/why-can-i-do-not-perform-an-ota-update-when-i-am-in-the-ap-mode-it/952874/3)