Delete files by id in kendo upload

Question

I have setup kendo upload as below.

@(Html.Kendo().Upload().Name("files")
.Async(a => a
    .Save("UploadAttachments", "Mycontroller")
    .Remove("RemoveAttachments", "Mycontroller")
    .SaveField("files")
    .RemoveField("ids")
    .AutoUpload(true))
.Events(e => e
    .Success("onUploadSuccess")
    .Error("onUploadError"))
.Files(files =>
{
    foreach (var f in Model.Attachments)
    {
        files.Add().Name(f.FileName).Extension(Path.GetExtension(f.FileName));
    }
}))

UploadAttachments methods saves the file in server file and create a record in db and returns the following model

Id-long
FileName: fileName

RemoveAttachments methods expects ids. During create with empty existing files I have following event handler which updates the file so that I can be deleted using id.

function onUploadSuccess(e) {
    if (e.operation == "upload") {
        e.files[0].data = e.response[0]; // hold the attachment detail
        e.files[0].name = e.response[0].Id; // change name with id so it can be passed to remove method
    }
}

But with existing files, I couldn't think a way of updating the file or assign the id from Model.Attachements into upload control.

I can set name with id during init, but in that way I can't show the name of file correctly.

foreach (var f in Model.Attachments)
{
      files.Add().Name(f.Id.ToString).Extension(Path.GetExtension(f.FileName));
}

This will show wrong file name in UI.

score 2 · Accepted Answer · answered May 24 '17 at 08:34

Such behavior is currently not supported in the Kendo Upload control. Yet one way to achieve it with the current version is to use some kind of delimiter ,add the id after the name property and override the internal _renderInitialFiles method in the control to retrieve the name and the id correctly. You can also use the remove event to send the id instead of the name to the server.

<div >
    @(Html.Kendo().Upload()
        .Name("files")
        .Async(a => a
            .SaveField("files")
            .RemoveField("ids")
            .Save("Save", "Upload")
            .Remove("Remove", "Upload")
            .AutoUpload(true)
        )
        .Events(e=>e.Remove("fileRemove").Success("onUploadSuccess"))
        .Files(files =>
        {
                files.Add().Name("somename-someid").Extension(".txt");
        })
    )
</div>

<script>

    function assignGuidToFiles(files, unique) {
        var uid = kendo.guid();

        return $.map(files, function (file) {
            file.uid = unique ? kendo.guid() : uid;

            return file;
        });
    }

    kendo.ui.Upload.fn._renderInitialFiles = function (files) {
        var that = this;
        var idx = 0;
        files = assignGuidToFiles(files, true);

        for (idx = 0; idx < files.length; idx++) {
            var currentFile = files[idx];
            var delimiterIndex = currentFile.name.indexOf("-");
            currentFile.id = currentFile.name.substring(delimiterIndex + 1);
            currentFile.name = currentFile.name.substring(0, delimiterIndex);

            var fileEntry = that._enqueueFile(currentFile.name, { fileNames: [currentFile] });
            fileEntry.addClass("k-file-success").data("files", [files[idx]]);

            if (that._supportsRemove()) {
                that._fileAction(fileEntry, "remove");
            }
        }
    }

    function onUploadSuccess(e) {
        if (e.operation == "upload") {

        }
    }

    function fileRemove(e) {
        for (var i = 0; i < e.files.length; i++) {
            e.files[i].name = e.files[i].id;
        }
    }
</script>

Thank you so much for this! That's the only thing which works reliable with multiple files. Glad with JS we can patch stuff like that by ourself. — Nightking, Jul 15 '21 at 09:08

Delete files by id in kendo upload

1 Answers1