Telerik MVC Upload Control

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);

Thanks,
@VHNG