XMLHttpRequest is always calling "load" event listener, even when response has error status

Question

I'm using FormData to ajax a file upload. The upload works, but the problem is that the "error" callback is never invoked. Even when my HTTP response is a 500 internal server error (to test this I tweak server to respond with 500), the "load" callback is invoked.

function upload_image() {     var form = document.getElementById('upload_image_form');     var formData = new FormData(form);      var xhr = new XMLHttpRequest();     xhr.addEventListener("load", function(e) {         alert("Success callback");     }, false);     xhr.addEventListener("error", function(e) {         alert("Error callback");     }, false);     xhr.open("POST", "/upload_image");     xhr.send(formData); } 

Any ideas? I'm testing this on Chrome.

Answer 1

This setup should work better for your needs:

var req = new XMLHttpRequest(); req.open('POST', '/upload_image'); req.onreadystatechange = function (aEvt) {   if (req.readyState == 4) {      if(req.status == 200)       alert(req.responseText);      else       alert("Error loading page\n");   } }; req.send(formData); 

In your code error callback is never called because it is only triggered by network-level errors, it ignores HTTP return codes.