MVC Telerik Upload Control

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

Many times we required to get the status or file Id in database as return value after uploading. Here, when file is uploaded and you return any status message of from save function it will interpret as error in uploading file.

To get this functionality, go through bellow.

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