How to fill in a Kendo download with previously downloaded files

Question

I am using Kendo UI file upload for MVC and it works great. On my edit page, I want to show files that were previously downloaded from the Create page. For visual consistency, I would like to reuse the download widget on my edit page so that the user can use the delete function or add additional files if they want. Does the widget support downloads?

Thanks!

Answer 1

So, I understand that this is a rather old question, but I recently figured out how to do this reliably. While another answer here will necessarily display files, it really does not connect it to any of the events (in particular, to the “delete” event). Also, instead of manually setting all this up, I decided that I would prefer Kendo to do all the real dirty work.

Note. This applies only if autosync is not set to download the file. If you use the automatic download function, you can find examples in the Kendo documentation: http://docs.kendoui.com/api/web/upload#configuration-files

In any case, let's say we have an input for the file that we contributed to the Kendo download:

<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 }); } 

Then we just need to get the file information in our jQuery. I like to get it stuck in JSON strings in hidden fields, but you can do it however you want.

Here is an example using Mvc HtmlHelpers and Newtonsoft JSON.NET (I do not use Razor, but you should get a general idea):

 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)); } 

Please note: the format there is incredibly important. We bind the structure of the JavaScript object expected by Kendo:

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

So then all that remains to be done is all together. Basically, we are going to recreate the onSelect function from the Kendo syncUploadModule internal code:

 $(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"); } } }); 

And that is pretty much!

Answer 2

I came up with a way to do this.

Basically, you need HTML that mimics what the Upload control generates, and you use a bit of JavaScript to anchor each element up. First, I rendered the HTML as hidden, and then after initializing the Kendo Upload control, you add the HTML list to the parent container created by Kendo.

This is my MVC view:

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

and here is the JavaScript (note, it was created from 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(); } 

You can find the full entry on my blog where I delve into this topic. Hope this helps you!

Answer 3

Some additional searches gave me an answer that I was not looking for - according to this and this , Telerik does not support pre-populating a downloadable widget with previously loaded documents.

Answer 4

It has been added to the parameters since this question has been asked.

Check out http://docs.telerik.com/kendo-ui/api/web/upload#configuration-files

It works only in asynchronous mode.

Answer 5

Try it...

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

My model has a link to my FundRequest object, which has a list of File objects, so I just go through each File and add it.