Wednesday, October 12, 2011

Telerik MVC Upload Control

Download Telerik library from
To see demo of uplod control, visit
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.

Error File
We need to work on Jquery to get correct output:
Success File
$(".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);


Thanks,
@VHNG

Post a Comment

Find a cool free stuff everyday

Giveaway of the Day

Hiren Bharadwa's Posts

DotNetJalps