postxmlhttprequestresponse

XmlHTTPRequest not returning Error Status from server after POST


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>

Solution

  • 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: *************