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

hi , i experienced same problem. I follow your fix, but the "SyntaxError: missing } in XML expression" is still there. any clue ?