title: how to find out if XMLHttpRequest.send() worked
body: <p>I am using <code>XMLHttpRequest</code> to send a file from <code>javascript</code> code to a <code>django view</code>.I need to detect,whether the file has been sent or if some error occurred.I used jquery to write the following javascript.</p>
  
  <p>Ideally I would like to show the user an error message that the file was not uploaded.Is there some way to do this in <code>javascript</code>?</p>
  
  <p>I tried to do this by returning a <code>success/failure</code> message from <code>django view</code> , putting the <code>success/failed message</code> as <code>json</code> and sending back the serialized json from the <code>django view</code>.For this,I made the <code>xhr.open()</code>  <code>non-asynchronous</code>. I tried to print the <code>xmlhttpRequest</code> object's <code>responseText</code> .The <code>console.log(xhr.responseText)</code>  shows </p>
  
  <pre><code>response= {"message": "success"}
  </code></pre>
  
  <p>What I am wondering is,whether this is the proper way to do this.In many articles,I found the warning that </p>
  
  <blockquote>
    <p>Using async=false is not recommended</p>
  </blockquote>
  
  <p>So,is there any way to find out whether the file has been sent,while keeping <code>xhr.open()</code> asynchronous?</p>
  
  <pre><code>$(document).ready(function(){
     $(document).on('change', '#fselect', function(e){
              e.preventDefault();
              sendFile();
          });
  });
  
  function sendFile(){
     var form = $('#fileform').get(0);
     var formData = new FormData(form);
     var file = $('#fselect').get(0).files[0];
     var xhr = new XMLHttpRequest();
     formData.append('myfile', file);
     xhr.open('POST', 'uploadfile/', false);
     xhr.send(formData);
     console.log('response=',xhr.responseText);
  }
  </code></pre>
  
  <p>My <code>django</code> view extracts file from form data and writes to a destination folder.</p>
  
  <pre><code>def store_uploaded_file(request):
     message='failed'
     to_return = {}
     if  (request.method == 'POST'):          
        if request.FILES.has_key('myfile'):
           file = request.FILES['myfile']
           with open('/uploadpath/%s' % file.name, 'wb+') as dest:
              for chunk in file.chunks():
                 dest.write(chunk)
                 message="success"
     to_return['message']= message
     serialized = simplejson.dumps(to_return)
     if store_message == "success":
        return HttpResponse(serialized, mimetype="application/json")
     else:
        return HttpResponseServerError(serialized, mimetype="application/json")
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>I got this working with the help of @FabrícioMatté</p>
  
  <pre><code>xhr.onreadystatechange=function(){
         if (xhr.readyState==4 &amp;&amp; xhr.status==200){
            console.log('xhr.readyState=',xhr.readyState);
            console.log('xhr.status=',xhr.status);
            console.log('response=',xhr.responseText);
  
            var data = $.parseJSON(xhr.responseText);
            var uploadResult = data['message']
            console.log('uploadResult=',uploadResult);
  
            if (uploadResult=='failure'){
               console.log('failed to upload file');
               displayError('failed to upload');
            }else if (uploadResult=='success'){
               console.log('successfully uploaded file');
            }
         }
      }
  </code></pre>