How to get status message from Telerik MVC Upload Control
Jun 21, 2011

Download Telerik library from http://www.telerik.com/products/aspnet-mvc.aspx To see demo of uplod control, visit http://demos.telerik.com/aspnet-mvc/upload Reason to write this Blog: Many times we require to get some status message after saving files e.g. FileId from database. In this case when we pass non empty string from action, telerik considers it as error. Here in this blog i had mentioned steps to overcome this error. Telerik Upload control provides multiple files upload simultaneously sync/async.
@(Html.Telerik().Upload()
.Multiple(true)
.Name("UploadFile")
.ClientEvents(t => t.OnError("UploadFile.error").OnUpload("UploadFile.Upload"))
.Async(t => t.AutoUpload(false)
.Remove("Remove", "UploadFiles")
.Save("Save", "UploadFiles")))
When we pass message from save(), it throws alert box with message “Error! Upload failed. Unexpected server response – see console.” To override it: 1:  Get Object Get the object of uploading control and override its existing method which generates error message.
var r = $("#UploadFile").data("tUpload");
r._alert = function (ee) { };
$("#UploadFile").data("tUpload", r);
_alert() is the function which generates error message when response from save() is non empty. 2:   Get response text from Save() As we return status, it will fire UploadFile.error().
UploadFile.error = function (e) {
UploadFile.filename = e.files[e.files.length - 1].name;
UploadFile.statusMsg = e.XMLHttpRequest.responseText;
if (e.XMLHttpRequest.responseText.indexOf("Success") < 0) {
UploadFile.Status = "error";
}
else {
UploadFile.Status = "success";
}
};
XMLHttpRequest.responseText is the value of status sent from Save() by which you can distinguish with actual uploading error or the successful status message. 3: Change Classes to get correct output Here, file is uploaded success fully. Though it shows with red mark as error. We need to work on Jquery to get correct output:
$(".t-file .t-fail").removeClass("t-fail").addClass("t-success");
$(".t-file .t-success").html("uploaded");
$(".t-file .t-success").parent().find('.t-retry').removeClass("t-retry").addClass("t-delete");
$(".t-file .t-success").parent().find(".t-delete").parent().html("<span class='t-icon t-delete'></span>delete”);
4: Override function _removeFileEntry()  to get more functionality When you click on delete button it will just remove the file list from div, and call Remove() of controller. But if you want to handle some features from Jquery, like remove FileId from list of FileId stored in hidden field, override _removeFileEntry() of telerik uploader as:
var r = $("#UploadFile").data("tUpload");
r._removeFileEntry = function (v) {};
$("#UploadFile").data("tUpload", r);
 

1 COMMENTS

  1. Thanks a lot author.
    If you could show how you have in controller then it could more helpful.

    - Tshencho
    August 24, 2013 15:12
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Related Posts

Solve MS Ajax Script loading error in Safari & Chrome

Safari 3x and Google Chrome uses javascript engine called WebKit and which causes…

Jan 16, 2008

Use Enums for Bitwise Operation with Flags attribute

You may want to tag your enums with [Flags] should you need to…

Oct 3, 2008

A Brief Overview of ASP .Net HTTP Handlers and Modules

Whenever a request arrives at an IIS Web server, IIS examines the extension…

Sep 29, 2008
Top

Copyright © Prakash Software Solutions Pvt. Ltd. All Rights Reserved.