how to find out if XMLHttpRequest.send() worked

javascript, xmlhttprequest

Solution

`XMLHttpRequest` objects contain the `status` and `readyState` properties, which you can test in the `xhr.onreadystatechange` event to check if your request was successful.

Problem

I am using `XMLHttpRequest` to send a file from `javascript` code to a `django view`.I need to detect,whether the file has been sent or if some error occurred.I used jquery to write the following javascript. 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 `javascript`? I tried to do this by returning a `success/failure` message from `django view` , putting the `success/failed message` as `json` and sending back the serialized json from the `django view`.For this,I made the `xhr.open()` `non-asynchronous`. I tried to print the `xmlhttpRequest` object's `responseText` .The `console.log(xhr.responseText)` shows ``` response= {"message": "success"} ``` What I am wondering is,whether this is the proper way to do this.In many articles,I found the warning that Using async=false is not recommended So,is there any way to find out whether the file has been sent,while keeping `xhr.open()` asynchronous? ``` $(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); } ``` My `django` view extracts file from form data and writes to a destination folder. ``` 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") ``` EDIT: I got this working with the help of @FabrícioMatté ``` xhr.onreadystatechange=function(){ if (xhr.readyState==4 && 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'); } } } ```

Original source