I have been writing an embedded webserver on a small micro. I have many things working and can serve up webpages, etc. One page allows the user to upload a new firmware file. I have this working except that I cannot figure out how to return useful error information to them if they make a mistake (say try to upload a file with the wrong file extension). The webpage properly tells them that the Upload Failed (event listener for "error"), but I cannot figure out how to capture the status that was returned by the server - it is always 0 on failure (correctly 200 on success) and responseText is blank.
In this case I am sending "HTTP/1.1 400 Bad Request: Invalid argument (File Extension Invalid)." from the server. In onreadystatechange, readyState does get to 4 but status is always 0.
Please don't 'shoot' me as I am pretty new to Javascript... Below is the code in my firmware upload webpage. The "uploadFile" function is called when they push a button after selecting the file to upload.
Mike.
<script>
var downloadTimer;
var ajax;
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file1").files[0];
var formdata = new FormData();
formdata.append("file1", file);
ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
_("progressBar").style.visibility = 'visible';
ajax.onreadystatechange = function() {
if ((this.readyState === 4) && (this.status > 0)){
console.log(this.responseText);
}
}
ajax.open("POST", "/upload.cgi");
var timeleft = 90;
uploadTimer = setInterval(function(){
if (timeleft <= 0){
clearInterval(downloadTimer);
_("progressBar").style.visibility = 'hidden';
_("loaded_n_total").innerHTML = "";
_("status").innerHTML = "Firmware Update Complete";
clearInterval(downloadTimer);
} else {
var percent = Math.round((90 - timeleft) * 1.111);
_("progressBar").value = percent;
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
timeleft -= 1;
}
}, 1000);
ajax.send(formdata);
}
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
}
function completeHandler(event) {
_("loaded_n_total").innerHTML = "Applying new Firmware...please wait";
}
function errorHandler(event) {
clearInterval(uploadTimer);
_("progressBar").style.visibility = 'hidden';
_("loaded_n_total").innerHTML = "";
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
clearInterval(uploadTimer);
_("progressBar").style.visibility = 'hidden';
_("loaded_n_total").innerHTML = "";
_("status").innerHTML = "Upload Aborted";
}
</script>
If your web page is being served from a different origin than your microcontroller, the browser may block the response due to CORS policy. Ensure that your server is configured to send the appropriate CORS headers, such as: ********** Access-Control-Allow-Origin: *************