I am currently trying to implement an over-the-air update for my micro controller. 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 jQuery so far. Using jQuery does not work with the project since it has no internet access.
jQuery:
<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">progress: 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 tried to get the upload part with that but it seems I missing some properties or did set wrong parameters
Plain javascript:
<!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", document.getElementById('fileupload').files[0]);
await fetch("/upload", {
method: "POST", // *GET, POST, PUT, DELETE, etc.
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 the code for that example (c++): https://github.com/espressif/arduino-esp32/blob/master/libraries/ArduinoOTA/examples/OTAWebUpdater/OTAWebUpdater.ino
I modified it a little 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 if it is really needed: https://forum.arduino.cc/t/why-can-i-do-not-perform-an-ota-update-when-i-am-in-the-ap-mode-it/952874/3)
jQuery request console output
JavaScript request console output
This is where the website code gets replaced
