Error Handling

[Joel]

If I get a failure during my upload process, how do I show that an error occurred and what it is?

<div>
    <hr />
    <h3>Upload Files to Session...</h3>
    <div class="demo-section k-content">
        @(Html.Kendo().Upload()
            .Name("files")
            .Async(a => a
                .Save("UploadSessionFiles", "Sessions", routeKeys)
                .AutoUpload(true))
        )
    </div>
    <hr />
</div>

[Aleksandar]

Hello Joel,

When the upload is in async mode the Error event is available. The Save handler is expected to return any of the following responses:

• An empty response to signify success.
• A JSON string with "text/plain" content encoding. The de-serialized object is available in the success event handler, again to signify success.
• Any other response to signify failure.

Having said that, you can customize the Error event handler function to display the returned error message.

public ActionResult Async_Save(IEnumerable<HttpPostedFileBase> files)
{
//on error you can return a custom message, for example:
    return Content("Error occured during upload");
}

@(Html.Kendo().Upload()
            .Name("files")
            .Async(a => a
                .Save("Async_Save", "Home")
                .AutoUpload(true))
            .Events(ev=>ev.Error("onError"))
        )

function onError(e) {
        alert("Error (" + e.operation + ") :: " +e.XMLHttpRequest.response);
    }

The event data includes:

• e.files  - Lists the files that were uploaded or removed.
• e.operation - The upload or remove operation.
• e.XMLHttpRequest - Represents either the original XHR that is used for the operation or a stub that contains responseText, status and statusText. Before you access any other fields, verify that this is an actual XHR.
  

I hope the above information helps. Let me know if you have any additional questions.

Regards,
Aleksandar
Progress Telerik

[Joel]

While your answer may be technically correct it is incomplete in many ways.  From the code I provided, you can see that I'm using your control using the MVC technique.  Look at the Save method.  I have attached a picture of the alert you suggested.

• This doesn't give me the error message as it has so much meta data that the string is truncated.
• If the error message was shown, I could never show this error to the user because of the formatting.

 

What is the best practices way to handle an upload error using the MVC technique?  Am I expected to call another Method on the controller?  If so, how and where do I extract the actual error message from the result set?

Thanks, Joel.

[Aleksandar]

Hello Joel,

There are many ways to handle errors in the application and the approach of choice would depend on many variables. You can review the following posts on suggestions on how to best handle errors in ASP.NET MVC:

https://docs.microsoft.com/en-us/dotnet/standard/exceptions/best-practices-for-exceptions

https://www.dotnetcurry.com/patterns-practices/1364/error-handling-dotnet-projects

https://dzone.com/articles/best-practices-for-error-handling-in-aspnet-mvc

https://stackoverflow.com/questions/4523831/best-practices-for-asp-net-mvc-error-handling

When the Upload is in async mode and the upload or remove operation fails the error event is triggered. As the save handler is expected to return either an empty response or JSON string with "text/plain" content encoding in event of success, returning anything else would signify that an error with the operation has occurred. Having said that you can further change the response returned from the action method to signify an error, for example:

public ActionResult Async_Save(IEnumerable<HttpPostedFileBase> files)
{
...
    // if an error occurs during upload you can return different status codes based on the errors
    return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "An error occured during upload");
}

You would still need to define an Error handler function for the error event

.Events(ev=>ev.Error("onError"))

But with the above suggestion you can customize it to show more meaningful error:

function onError(e) {
        alert("Error (" + e.operation + ") :: Status Code :: " + e.XMLHttpRequest.status + " :: Status text :: "+ e.XMLHttpRequest.statusText);
    }

The error event provides a reference to the original XHR that is used for the operation or a stub that contains the responseText, status, and statusText fields. This way you can display any of those fields on the client.

Regards,
Aleksandar
Progress Telerik