Как да попълните Kendo Upload с предварително качени файлове

И така, осъзнавам, че въпросът е доста стар, но наскоро разбрах как да направя това надеждно. Докато другият отговор тук със сигурност ще покаже файловете, той всъщност не го свързва с нито едно от събитията (по-специално събитието „премахване“). Освен това, вместо ръчно да настройвам всичко това, реших, че бих предпочел Kendo да свърши цялата истинска мръсна работа.

Имайте предвид, че това се прилага само ако качването на вашия файл не е настроено на автоматично синхронизиране. Ако използвате функцията за автоматично качване, можете да намерите примери в документацията на Kendo тук: http://docs.kendoui.com/api/web/upload#configuration-files

Така че както и да е, нека приемем, че имаме въведен файл, който сме направили в Kendo Upload:

<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 на Kendo:

$(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, който имитира това, което генерира контролата за качване, и използвате малко JavaScript, за да свържете всеки елемент. Първоначално изобразявам HTML като скрит, след което, след като инициализирате контролата за качване на Kendo, добавяте 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“, който има списък с обекти „Файл“, така че просто преминавам през всеки „Файл“ и добавям.