Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.
Notice: I'm taking a break from blogging to focus on Atari Gamer . com, check it out!

NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the FAQ for more details.
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...
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!


Skip down to comments...
A quick disclaimer...

Although I put in a great effort into researching all the topics I cover, mistakes can happen. If you spot something out of place, please do let me know.

All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle). Use of any information contained in this blog post/article is subject to this disclaimer.
comments powered by Disqus
Other posts you may like...