AjaxFileUpload SyntaxError: missing } in XML expression

Question

I'm trying to upload a file using $.ajaxFileUpload. My server script is returning a json object eg.

{"imgName": "test.jpg", "imgUrl": "/uploadtest/images/profile/sam.jpg"}

When I check in firefox it shows the correct response. Json is also received. But still I'm getting an error in alert:

SyntaxError: missing } in XML expression

I couldn't understand why this error is shown up. Also in firebug Json object is shown correctly.

<script type='text/javascript' src='/js/ajaxfileupload.js'></script>
<script type='text/javascript'>
    function doFileUpload(){
        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })
        .ajaxComplete(function(){
            $(this).hide();
        });
        $.ajaxFileUpload(
            {
            url:'/json/image/upload.html?action=saveImage&nameSpace=tot',
            secureuri:false,
            fileElementId:'imgFile',
            dataType: 'json',
            success: function (data, status){
                alert("Success: "+data.imgUrl);
                },
            error: function (data, status, e){
                alert("Error: "+e+"---URL: "+data.imgUrl);
                }
            }
        )
    }
</script>

.... ....

<div>
<strong>Upload Images:</strong><br>
<input type='file' name='imgFile' id='imgFile'>&nbsp;&nbsp;
<img src='/images/loading.gif' id='loading' height='60px' width='60px' style='display:none'>
<br><button name='upload' id='upload' onclick='return doFileUpload();'>Upload</button>
</div>

Anyone can tell me what's the reason for the Error?

Answer 1

I finally found the problem. The problem is with AjaxFileUpload plugin of Jquery which I'm using. Instead of 'json' in dataType it requires it to be capitalized. dataType: 'JSON'. Also after fixing this it automatically adds <pre> and </pre> to the beginning and end of the received json data. So it is not interpreted ad json.

Actual data that i received was

<pre>{"imgName": "test.jpg", "imgUrl": "/uploadtest/images/profile/sam.jpg"}</pre>

Now I'll have to remove there tags and then parse it with $.parseJson(). If anyone have the same error then check these problems. I hope ajaxFileUpload plugin will be fixed soon.

Answer 2

I found that with the return data in Mozila I was having this problem. Actually the message was being returned with <p>message</p> and this was giving an error.

The fix I applied was to remove anything not needed in the return message and it's working. But I'm not sure if its a permanent fix. At the end of the ajaxfileupload.js script file I modified the uploadHttData function

uploadHttpData: function( r, type ) {
    var data = !type;
    var dataparsed = r.responseText.split("{"); //added by Jude
    dataparsed = dataparsed[1].split("}"); //added by Jude
    ///Commented By Jude
    ///data = type == "xml" || data ? r.responseXML : r.responseText;
    // If the type is "script", eval it in global context
    data = type == "xml" || "{ " + dataparsed[0] + " }"; //added by Jude
    if ( type == "script" )
        jQuery.globalEval( data );
    // Get the JavaScript object, if JSON is used.
    if ( type == "json" ) {
        eval( "data = " + data );
    }
    // evaluate scripts within html
    if ( type == "html" )
        jQuery("<div>").html(data).evalScripts();
                    //alert($('param', data).each(function(){alert($(this).attr('value'));}));
    return data;
}