Kendo Upload Control, Pass custom error message back to view

Question

I am working with ASP.NET MVC3, Kendo UI, and Jquery. I am trying to pass an error message back to the view when the processing of an uploaded file does not pass validation rules that we have.

Here is my upload control in my view:

@(Html.Kendo().Upload()
  .Name("files")
  .Async(a => a
  .Save("SaveForm", "Home")
  .Remove("RemoveForm", "Home")
  .AutoUpload(true))
  .Events(events => events
  .Success("onSuccess")
  .Error("onUploadError")
  .Select("onSelect")
  ))

Here are the relevant parts of the SaveForm method in the controller:

try
{
      FieldDefinitions = ProcessPDFFile(file.FileName);
}
catch (InvalidDataException ex){
    List<String> errors = new List<String>();
    errors.Add(ex.Message);
    Response.StatusCode = 500;
    Response.TrySkipIisCustomErrors = true;

    //return Json(new { success = false, statusText = "error error" }, "text/plain");
    //ModelState.AddModelError("pp", ex.Message);
    //var result = ModelState.ToDataSourceResult();
    //return Json(errors, JsonRequestBehavior.AllowGet);
    //return Json(new { status = "OK" }, "text/plain");
    //return Json(String.Concat(errors.ToArray()));
    //return Json(new AjaxResult(false, ex.Message, errors ));
}

Here is my Jquery error function:

function onUploadError(e)
{
    alert(e.message);
}

In my controller, ex.Message is a custom error message and I want to pass it back to the view for display. You can see all the different variations that I tried to pass it back by looking at the commented out lines of code in my controller.

The jquery error function is getting executed. The only problem is I can't seem to get my custom error message in the jquery.

When evaluating e.XMLHTTPRequest

it has the following:

responseText = "Error trying to get server response" Status = 500 StatusText = "error"

So how do I get my custom error message into one of the above elements of XMLHTTPRequest? I assume the return on my controller needs to be modified somehow.

Answer 1

The solution is simple, once you see it, but the documentation on this is not complete. We know that we should return an empty string to signify success. I have also seen – but cannot find right now – docs that suggest you could alternately return a JSON object instead of string.Empty, and that too would signify success. Anything other than JSON object or string.Empty signifies an error. But how do we handle it?

The argument sent to the Error event handler still has the basic components: e.files, e.operation, and e.XMLHttpRequest. The solution is to return a normal string in your controller’s method, and it becomes the raw XMLHttpRequest.responseText. It is not JSON, so don’t try to parse as JSON.

Controller:

    public ActionResult Index(IEnumerable<HttpPostedFileBase> files)
    {
        try
        {
            // … do something
            return Content(string.Empty);
        }
        catch (Exception ex)
        {
            // simply send the error message to Content
            return Content(ex.Message);
        }
    }

JavaScript handler:

    function onError(e) {
        // invalid because the responseText is a raw string, not JSON
        //var err = $.parseJSON(e.XMLHttpRequest.responseText);
        var err = e.XMLHttpRequest.responseText;
        alert(err);
    };