在剑道上传中按id删除文件

Question

我已经设置剑道上传如下。

@(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 方法将文件保存在服务器文件中并在 db 中创建记录并返回以下模型

Id-long
FileName: fileName

RemoveAttachments 方法需要 id。在使用空的现有文件创建期间，我有以下事件处理程序，它更新文件以便可以使用 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
    }
}

但是对于现有文件，我想不出更新文件或将 ID 从 Model.Attachements 分配到上传控件的方法。

我可以在初始化过程中使用 id 设置名称，但这样我无法正确显示文件名。

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

这将在 UI 中显示错误的文件名。

Answer 1

Kendo Upload 控件目前不支持此类行为。然而，在当前版本中实现它的一种方法是使用某种分隔符，在 name 属性后添加 id 并覆盖控件中的内部 _renderInitialFiles 方法以正确检索名称和 id。您也可以使用remove 事件将id而不是名称发送到服务器。

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