Удалить файлы по идентификатору в загрузке кендо

Я настроил загрузку кендо, как показано ниже.

@(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 сохраняют файл в файле сервера, создают запись в базе данных и возвращают следующую модель.

Id-long
FileName: fileName

Методы RemoveAttachments ожидают идентификаторы. Во время создания с пустыми существующими файлами у меня есть следующий обработчик событий, который обновляет файл, чтобы меня можно было удалить с помощью 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
    }
}

Но с существующими файлами я не мог придумать способ обновить файл или назначить идентификатор из Model.Attachments в управление загрузкой.

Я могу установить имя с идентификатором во время инициализации, но таким образом я не могу правильно показать имя файла.

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

Это покажет неправильное имя файла в пользовательском интерфейсе.


javascript asp.net-mvc upload kendo-ui kendo-upload
person agileD    schedule 19.05.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Такое поведение в настоящее время не поддерживается в элементе управления Kendo Upload. Тем не менее, один из способов добиться этого в текущей версии — использовать какой-то разделитель, добавить идентификатор после свойства имени и переопределить внутренний метод _renderInitialFiles в элементе управления для правильного получения имени и идентификатора. Вы также можете использовать событие remove, чтобы отправить идентификатор вместо имени на сервер.

<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>
person Plamen Zdravkov    schedule 24.05.2017
comment
Спасибо вам большое за это! Это единственное, что надежно работает с несколькими файлами. Рад, что с JS мы можем исправлять подобные вещи самостоятельно. - person Nightking; 15.07.2021

arrow_upward
1
arrow_downward

Сейчас есть лучшее решение. Документация ссылается на необязательный ' объект, который отправляется обработчику удаления. Вы можете использовать это для передачи любых дополнительных параметров, которые вам нужны во время события Remove. Вот пример того, как я это реализовал.

На стороне клиента:

<div>
    @Html.HiddenFor(m => m.AttachmentId)
    @(Html.Kendo().Upload()
        .Name("AttachmentUploader")
        .Async(async => async.Remove("Remove", "Attachments"))
        .Events(e => e
            .Remove("onRemove")
            .Success("onSuccess")))
</div>
<script>        
    function onRemove(e) {
        e.data = {
            id: document.getElementById('AttachmentId').value
        };
    }

    function onSuccess(e) {
        switch (e.operation) {
            case 'remove':
                document.getElementById('AttachmentId').value = null;

                break;
        }
    }
</script>

и на стороне сервера:

public ContentResult Remove(int id)
{
    // call service to delete attachment by id. 

    return Content("");
}
person Kurt Pinette    schedule 26.08.2020
comment
Кажется, это работает только для отдельных файлов. - person Nightking; 15.07.2021