kendo ui file upload plugin remove button customization

Question

I am new to kendo ui and i am using the file upload plugin in my asp.net mvc application.Everything works like a dream.But i have one additional requirement. When i am uploading the file i am assigning a unique image guid to the image file and uploading and then returning to the callback function.Here is my code.

<script type="text/javascript">
    $(document).ready(function () {
        $("#attachments").kendoUpload({
            async: {
                saveUrl: '@Url.Action("UploadBlogImages", "Blog")',
                removeUrl: '@Url.Action("Remove", "Blog")',
                autoUpload: true
            },
            success: function (data) {
                var imageGuids = data.response;
                $.each(imageGuids, function (index, imageGuid) {
                    $('#form_uploadPic').append('<input type="hidden" value=' + imageGuid + 'name="ImgGuid">');
                });
            }
        });
    });
</script>

I need to delete the file when the user clicks the remove button but my problem is, by default the remove button passes the name of the file(that was used at the time of upload)as the file name to delete.But I am renaming the file before uploading to server.I am assigning a unique guid to file.I have returned that guid to the success function.How do i configure so that the remove button passes that guid to server for deleting the file.

Thanks, S

Answer 1

Interesting scenario. There's two ways to go about it right now:

1. On success, locate the li element that represents the fileEntry and get it's fileNames data-* attribute. Set the name property of the retrieved fileNames object to the guid value you got back from the server. This essentially updates the file name used by the remove functionality of the Kendo Upload control. (If you can get your hands on the original source, look for methods removeUploadedFile and _submitRemove, all of this will make a lot of sense)

2. The cleaner (somewhat) option is, on success, to find the newly added li element (fileEntry) and then it's associated 'Remove' button (class : k-upload-action). Once you have the remove button, you can then hook up a click event via which to call your own custom url or the removeUrl of the upload control, passing to it the file guid you retrieved on upload success.

Answer 2

another option is to add the id to the file object itself, so in the onSuccess handler add this:

function onUploadSuccess(e) {
    //add the id returned in the json from the upload server script
    e.files[0].id=e.response.id;
}

then in the remove handler change the name to the id:

function onUploadRemove(e) {
    var files = e.files;
    for(i=0;i <files.length;i++){
            //replace the name with the id added to the object
        files[i].name=files[i].id;
    }
}

setup like this:

$("input[type='file']").kendoUpload(
    {
        async: {
            saveUrl: "url",
            removeUrl: "url",
            removeField: "files"
       },
        success: onUploadSuccess,
        remove: onUploadRemove
    }
);

works on latest kendoUI