Как заполнить Kendo Upload ранее загруженными файлами

Итак, я понимаю, что это довольно старый вопрос, но недавно я понял, как это сделать надежно. В то время как другой ответ здесь, безусловно, отобразит файлы, на самом деле он не связывает его ни с одним из событий (в частности, с событием «удалить»). Кроме того, вместо того, чтобы настраивать все это вручную, я предпочел бы, чтобы Кендо делал всю настоящую грязную работу.

Обратите внимание, что это применимо только в том случае, если для загрузки вашего файла не установлена ​​автосинхронизация. Если вы используете функцию автоматической загрузки, вы можете найти примеры в документации по кендо здесь: http://docs.kendoui.com/api/web/upload#configuration-files

Так или иначе, давайте предположим, что у нас есть входной файл, который мы превратили в загрузку кендо:

<input id="files" name="files" type="file" multiple="multiple" />

$(document).ready(function () { 
    var $upload = $("#files");
    var allowMultiple = Boolean($upload.attr("multiple"));

    $upload.kendoUpload({
        multiple: allowMultiple,
        showFileList: true,
        autoUpload: false        
    });
}

Затем нам просто нужно получить информацию о файлах в наш jQuery. Мне нравится вставлять его в строки JSON в скрытых полях, но вы можете делать это по своему усмотрению.

Вот пример использования Mvc HtmlHelpers и JSON.NET от Newtonsoft (я не использую Razor, но вы должны получить общее представление):

if (Model.Attachments.Count > 0)
{
    var files = Model.Attachments.Select(x => new { name = x.FileName, extension = x.FileExtension, size = x.Size });
    var filesJson = JsonConvert.SerializeObject(files);
    Html.Render(Html.Hidden("existing-files", filesJson));
}

Обратите внимание, формат здесь невероятно важен. Мы привязываемся к структуре объекта JavaScript, которую ожидает Kendo:

{
    relatedInput : sourceInput,
    fileNames: [{ // <-- this is the collection we just built above            
        name: "example.txt",
        extenstion: ".txt",            
        size: 1234
    }]
}

Итак, осталось собрать все воедино. По сути, мы собираемся воссоздать функцию onSelect из внутренней syncUploadModule кендо:

$(document).ready(function () {
    // setup the kendo upload
    var $upload = $("#files");
    var allowMultiple = Boolean($upload.attr("multiple"));

    var upload = $upload.kendoUpload({
        multiple: allowMultiple,
        showFileList: true,
        autoUpload: false        
    }).getKendoUpload();

    // initialize the files
    if (upload) {
        var filesJson = $("[name$='existing-files']").val();
        if (filesJson) {                
            var files = JSON.parse(filesJson);

            var name = $.map(files, function (item) {
                return item.name;
            }).join(", ");

            var sourceInput = upload._module.element.find("input[type='file']").last();
            upload._addInput(sourceInput.clone().val(""));
            var file = upload._enqueueFile(name, {
                relatedInput : sourceInput,
                fileNames : files
            });
            upload._fileAction(file, "remove");
        }
    }
});

И это почти все!

Я придумал способ сделать это.

По сути, вам нужен HTML, который имитирует то, что генерирует элемент управления Upload, и вы используете немного JavaScript для подключения каждого элемента. Сначала я отображаю HTML как скрытый, затем, после инициализации элемента управления Kendo Upload, вы добавляете список HTML в родительский контейнер, который создает Kendo.

Это мой вид MVC:

@if (Model.Attachments != null && Model.Attachments.Count > 0)
{
  <ul id="existing-files" class="k-upload-files k-reset" style="display: none;">
    @foreach (var file in Model.Attachments)
    {
      <li class="k-file" data-att-id="@file.Id">
        <span class="k-icon k-success">uploaded</span>
        <span class="k-filename" title="@file.Name">@file.Name</span>
        <button type="button" class="k-button k-button-icontext k-upload-action">
          <span class="k-icon k-delete"></span>
          Remove
        </button>
      </li>
    }
  </ul>
}

и вот JavaScript (обратите внимание, он был сгенерирован из CoffeeScript):

var $fileList, $files, item, _fn, _i, _len;
$fileList = $("#existing-files");
if ($fileList.length > 0) {
  $(".k-upload").append($fileList);
  $files = $(".k-file");
  _fn = function(item) {
    var $item, fileId, filenames;
    $item = $(item);
    fileId = $item.data("att-id");
    filenames = [
      {
        name: fileId
      }
    ];
    return $item.data("fileNames", filenames);
  };
  for (_i = 0, _len = $files.length; _i < _len; _i++) {
    item = $files[_i];
    _fn(item);
  }
  $fileList.show();
}

Вы можете найти полную статью в моем блоге, где я подробно рассматриваю эту тему. Я надеюсь, это поможет вам!

Несколько дополнительных поисков дали мне ответ, который я не искал — согласно это и это, Telerik не поддерживает предварительное заполнение виджета загрузки ранее загруженными документами.

Он был добавлен в опции, так как этот вопрос был задан.

Проверьте http://docs.telerik.com/kendo-ui/api/web/upload#configuration-files

Работает только в асинхронном режиме.

Попробуй это...

            @(Html.Kendo().Upload()
              .Name("files")
              .Async(a => a
                  .Save("SaveFile", "Home")
                  .Remove("RemoveFile", "Home")
                  .AutoUpload(true))
              .Files(files =>
              {
                  foreach (var file in Model.FundRequest.Files)
                  {
                          files.Add().Name(file.Name).Extension(Path.GetExtension(file.Name)).Size((long)file.SizeKb * 1024);
                   }

              }))

В моей модели есть ссылка на мой объект «FundRequest», который имеет список объектов «Файл», поэтому я просто перебираю каждый «Файл» и добавляю.