Image Upload returning SyntaxError: Unexpected token <

[craig2005]

I've got the upload working in MVC. I'm uploading an image and everything is fine on the server side. I'm then returning JSON which is causing the problem.

I've read about others having this issue as well but not with EXT JS so they were able to handle and parse it on their own.

I debugged the EXT JS code and saw that the browsers is returning the JSON wrapped in pre tag like this:

<pre style="word-wrap: break-word; white-space: pre-wrap;">

Does anyone have any idea how to fix this?

The parser for EXT blows up here:

doDecode = function(json){
return eval("(" + json + ")");
}

Here's my ascx file:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

   
    <script type="text/javascript">

        var failureHandler = function (form, action) {
            Ext.Msg.show({
                title: "Save Error",
                msg: action.response.responseText,
                buttons: Ext.Msg.OK,
                icon: Ext.Msg.ERROR
            });
        };

        var successHandler = function (result, request) {
            Ext.Msg.show({
                title: "Saved!",
                msg: "done.",
                buttons: Ext.Msg.OK,
                icon: Ext.Msg.ERROR
            });
        };
     </script>


        <ext:FormPanel 
            ID="frmUpload" 
            runat="server"
            Width="500"            
            Title="File Upload Form"
            AutoHeight="true"
            MonitorValid="true"     
            Frame = "true"  
            url="/Group/UploadPhotoExt/"  
            Method="POST"
            FileUpload="true">                
            <Items>
                <ext:TextField ID="PhotoName" runat="server" FieldLabel="Caption" Name="caption" />
                <ext:FileUploadField 
                ID="FileName"
                    runat="server" 
                    EmptyText="Select an image"
                    FieldLabel="Photo"
                    ButtonText=""
                    Icon="ImageAdd"
                    />
            </Items>
            <Buttons>
                <ext:Button ID="SaveButton"  runat="server" Text="Save">
                    <Listeners>
                        <Click Handler="#{frmUpload}.getForm().submit({url: #{frmUpload}.submitUrl,  waitMsg : 'Sending request...',  success : successHandler, failure : failureHandler });" />
                    </Listeners>
                </ext:Button>
                <ext:Button  runat="server" Text="Reset" ID="ctl40">
                    <Listeners>
                        <Click Handler="#{frmUpload}.getForm().reset();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:FormPanel>

[Vladimir]

Hi,

What you return on the server? Please show your controller action

[craig2005]

I was using JsonResult but I switched it to your AjaxResult. It's working now but it allows jumps to the failure handler. I'm not sure why since everything is working great.

      
        public AjaxResult UploadPhotoExt(FormCollection collection)
        {
            AjaxResult ajaxResponse = new AjaxResult();
            try
            {
                var gm = (Session["GroupMembership"] as GroupMembership);
                if (!User.Identity.IsAuthenticated || !gm.IsInRolePhoto)
                {
                    ajaxResponse.ErrorMessage = "Not authorized";
                    return ajaxResponse;
                }

                string caption = collection.Get("caption");

                foreach (string file in Request.Files)
                {
                     // code to process files ....

                }

          
                ajaxResponse.Result = "Uploaded Successfully";
                ajaxResponse.IsUpload = true;
                return ajaxResponse;
            }
            catch
            {
                ajaxResponse.IsUpload = true;
                ajaxResponse.ErrorMessage = "Error while processing upload.";
                return ajaxResponse;
            }
        }

[craig2005]

ok, i figured it out.

For forms, you need to use the AjaxFormResult. Just using AjaxResult will not work. I'm not sure how you got the above example to work correctly without the AjaxFormResult.