kendo-ui - 以前にアップロードしたファイルを Kendo Upload に入力する方法

Question

Kendo UI File Upload for MVC を使用していますが、うまく機能します。編集ページで、作成ページから以前にアップロードされたファイルを表示したいと考えています。視覚的な一貫性を保つために、編集ページでアップロード ウィジェットを再利用して、ユーザーが「削除」機能を使用したり、必要に応じてファイルを追加したりできるようにしたいと考えています。アップロード ウィジェットはこれをサポートしていますか?

ありがとう！

Answer 1

これを行う方法を思いつきました。

基本的に、アップロード コントロールが生成するものを模倣する HTML が必要であり、JavaScript を少し使用して各項目を接続します。最初に HTML を非表示としてレンダリングし、次に Kendo Upload コントロールを初期化した後、Kendo が作成する親コンテナーに HTML リストを追加します。

これは私の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();
}

このトピックについて詳しく説明しているブログで、完全な記事を見つけることができます。これがお役に立てば幸いです。

Answer 2

この質問が出されてから、オプションに追加されました。

http://docs.telerik.com/kendo-ui/api/web/upload#configuration-filesを確認してください

非同期モードでのみ機能します。

Answer 3

いくつかの追加の検索で、私が探していなかった答えが得られました - thisおよびthisによると、Telerik は、以前にアップロードされたドキュメントをアップロード ウィジェットに事前入力することをサポートしていません。

Answer 4

これを試して...

            @(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」オブジェクトへの参照があるため、各「ファイル」をループして追加するだけです。