Image Upload returning SyntaxError: Unexpected token <

  1. #1

    Image Upload returning SyntaxError: Unexpected token <

    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>
  2. #2
    Hi,

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

    still not working

    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;
                }
            }
  4. #4

    i figured it out

    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.

Similar Threads

  1. [CLOSED] [MVC] Export Excel return "BADRESPONSE: Unexpected token <"
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 02, 2012, 4:05 PM
  2. BADRESPONSE: Unexpected token { on calendar control
    By Felixkirathe in forum 2.x Help
    Replies: 1
    Last Post: Apr 17, 2012, 5:07 PM
  3. Replies: 3
    Last Post: Apr 16, 2012, 2:56 PM
  4. how to Image upload and filtering it to preview image?
    By Mahmudur Rahman in forum 1.x Help
    Replies: 0
    Last Post: Sep 07, 2011, 8:58 AM
  5. [CLOSED] Load failed: Unexpected token <
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 02, 2010, 6:58 PM

Posting Permissions