Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

I've been using simpleUpload.js as my uploader script for some time now and it's been great, bar one feature - error message display on upload failures. Because of its focus on compatibility with older browsers, simpleUpload.js tries to parse server response only when a 200-series HTTP code is present. This means that if you use, say a 500 error code, (as you should!) on failed upload process requests, you will get a generic 'Upload failed' message in the error handler.

Prior to version 1.1 this error message was more confusing - "Could not get response from server".

I contacted Michael about this behaviour in his script and suggested that he include an XHR object in the case of a failure so that client side code can try and extract a more friendly error message from the server (assuming one is returned). He agreed to make this change and I've been using it for well over a week and am very happy!
New in v.1.1: The xhr property is useful when the server returns with a non-200 HTTP error code on application error and you need to capture the server's error message. This isn't reliable in older browsers and the xhr property won't exist if there is a different type of error, but if an AJAX request was made and returns with a non-200 HTTP response code, you can expect this property. You should, in general, check for this property's existence before using it.


This example assumes that a JSON response is returned from the server side and that the HTTP response code is non-200 i.e. 500. This is the type of response that frameworks like Backbone.js tend to expect (which I've also been using quite heavily).

In my case, the response from the server can be boiled down to something like this (I actually return more data but that's not relevant for this example)...
 Error JSON Response
{
"error": "Some friendly error message"
}


The important point here is that there is a JSON object that has a property called "error".



The simpleUpload.js error handler can now do something like this...
 JavaScript
file.simpleUpload(url, {
...
error: function(error) {
var xhr = error.xhr;
var json = xhr.responseJSON;
console.log('Upload error: ' + json.error);
}
});


That's a very simplistic and unnecessarily verbose example, but it shows the point. The error object in the error() callback now contains an XHR object. From that, it is possible to extract the JSON object and finally to access the "error" property. Simple!

Of course this being an example it's not production ready and just as Michael suggests in his documentation - "You should, in general, check for this property's existence before using it."

That just about covers it. There is one other nice change in the 1.1 release - the beforeSend() callback which gives you the ability to modify headers for the XHR object before a request is made to the server. Thanks to Michale for these changes and being so responsive to feedback!

-i

Hope you found this post useful...

...so please read on! I love writing articles that provide beneficial information, tips and examples to my readers. All information on my blog is provided free of charge and I encourage you to share it as you wish. There is a small favour I ask in return however - engage in comments below, provide feedback, and if you see mistakes let me know.

If you want to show additional support and help me pay for web hosting and domain name registration, donations, no matter how small, are always welcome!

Use of any information contained in this blog post/article is subject to this disclaimer.
comments powered by Disqus
Other posts you may like...