How to return error if JSON is being returned with data

[Jaesoon]

I've got a situation where I want to return data from the controller if there are errors on the file i'm uploading.

 

For simple messages, i can just do [return Content("error")] which will cause the uploader to show an error message (with relevant error items - red colour, X icon etc).

 

However, i have a case where i am returning a JSON object with details of all the issues with the uploaded file like so [return Json(returnItem)].

 

I would expect the upload control to fail (as the documentation states it only accepts an empty string to be the success case) but i am getting the success behaviour from the upload control (green text).

 

How can i make it so it shows the error state when i am returning a JSON object?

 

 

Thanks

 

 

[Veselin Tsvetanov]

Hi Jaesoon,

Thank you for contacting us.

By design, when the returned response is a JSON, it is interpreted by the Upload widget as a success response. The returned JSON is available deserialized in the success event handler and could be accessed by:

function onSuccess(e) {
    var returnedObject = e.response;
}

Then, based on the content of the object sent, you could manually change the appearance of the file DOM element: 

function onSuccess(e) {
    var returnedObject = e.response;
    if (returnedObject.ProductID == 56) {
        $('.k-file').removeClass('k-file-success').addClass('k-file-error');
    }
}

I hope that the above helps you. If you have any further questions, please do not hesitate to contact us.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Jaesoon]

Thanks for your help Veselin,

 

While it doesn't change control fully into the error state, trying to modify each elements manually to look like the error state will be too time consuming so we'll just stick with changing the colour to red.

 

For your reference i've added an example, i1.png shows an error (with the alert icons) whereas i2.png shows a success (with the tick icon).

[Veselin Tsvetanov]

Hello Jaesoon,

You could further extend the custom styling so the failed file row looks like a true error row:

function onSuccess(e) {

    var returnedJson = e.response;

    if (returnedJson.ProductID == 56) {

        $('.k-file').removeClass('k-file-success').addClass('k-file-error');

        var statusStrong = $('.k-upload .k-file .k-upload-status');

        statusStrong.find('.k-upload-pct').removeClass('k-upload-pct').addClass('k-icon k-warning').text('');

        setTimeout(function () {

            statusStrong.find('.k-icon').removeClass('k-i-close').removeClass('k-delete').addClass('k-i-refresh k-retry').attr('title', 'Retry');

        }, 200);

    }

}


I hope that this helps you.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Tamas]

You can also set the status code to 500, then return the whatever JSON you want:

Response.StatusCode = (int)HttpStatusCode.InternalServerError;
return Content(JsonConvert.SerializeObject(new { Errors = errors }));
           

[Dimiter Madjarov]

Hello guys,

As of Q3 2016 the success event of the Upload widget is preventable, which will result in displaying the file as failed. This is helpful in scenarios like the current one, when a JSON data should be returned in any case.

Regards,
Dimiter Madjarov
Telerik by Progress