Triggering OnCancel event of kendo upload on click of button

Question

enter image description here

I want to Cancel the file uploading on click of cancel button.

means I want to trigger the onCancel(e) event on click of my cancel button

My code is,

 @(Html.Kendo().Upload()
  .Name("files")
   .Multiple(false)
   .Async(a => a
    .Save("UploadArtifactFile", "PP", new { TeacherEvalID = ViewBag.TeacherEvalID, ObservationID = ViewBag.ObservationID, Accountid = ViewBag.AccountID })
    .AutoUpload(false)
    .RemoveField("")
     )
    .Events(events => events
    .Success("onSuccess")
    .Select("onSelect")
    .Error("onUploadError")
    .Upload("onUpload")
     .Cancel("onCancel")
     .Remove("onRemove")
      )

   On cancel event is work as expected,  

function onCancel(e) {
        //Array with information about the uploaded files
        var files = e.files;
        e.preventDefault();
    }

I want to do the same thing for Cancel Button and on click of cancel button i have write code as,

function setNewArtifact() {
        var upload = $("#files").data("kendoUpload");
        //detach events and prepare for safe removal
        //upload.destroy();

        $(".k-upload-files.k-reset").find("li").remove();
        $('#lblArtifactFileName').val("");
        $('#lblArtifactFileName').hide();
        //hdnArtifactUploadIsAddOrEdit :1 for new artifact (Add)
        $('#hdnArtifactUploadIsAddOrEdit').val("1");
        $('#txtArtifactDescription').val("");
        $('#lblArtifactFileName').hide();
        $('#btnModifyArtifact').css("display", "none");
        $('.k-upload-selected').css("display", "none");

        //on click of cancel hide the uploading and uploaded status
        $(".k-dropzone").find("strong").css("display","none");
        $(".k-upload-status.k-upload-status-total").find("span").css("display","none");

        $.extend(upload.options.localization, {
            headerStatusUploading: "",
            headerStatusUploaded: ""
        });

    }

There is any way to do this?

Please help...

Try first. If you get any error, then ask here. To search for ways and tutorials, www.google.com is there. — RatDon, Mar 20 '15 at 05:42
I have tried a lot.and searched for manually triggering event an click of button. but I didn't get any answer. — Shital Kadam, Mar 20 '15 at 05:46
I have write the code as function setNewArtifact() { //on click of cancel hide the uploading and uploaded status $(".k-dropzone").find("strong").css("display","none"); $(".k-upload-status.k-upload-status-total").find("span").css("display","none"); $.extend(upload.options.localization, { headerStatusUploading: "", headerStatusUploaded: "" });} — Shital Kadam, Mar 20 '15 at 05:47
Have a look at this. http://stackoverflow.com/questions/22565570/kendo-ui-form-update-cancel-button — RatDon, Mar 20 '15 at 05:50
I have also write the Cancel event for file uploading. Its work perfectly when i click on that circle button which is kendo upload remove button. But i want to trigger that same event on click of cancel button also. Please see the attached image — Shital Kadam, Mar 20 '15 at 06:00

score 2 · Accepted Answer · answered Mar 20 '15 at 06:50

You can trigger upload cancel event:

$(document).ready(function() {
  $("#files").kendoUpload({
    async: {
      saveUrl: "save",
      removeUrl: "remove",
      autoUpload: true
    },
    cancel: function(e) {
      alert("cancel");
    }
  });

  $("#button").click(function(e) {
    $("#files").data("kendoUpload").trigger("cancel"); 
  });
});

<input name="files" id="files" type="file" />
<button id="button">Cancel</button>

Triggering OnCancel event of kendo upload on click of button

1 Answers1

Linked