Upload template link to files

[Fred]

I would like to use a template for my upload widget that creates a link to the file so the user can preview them.  However I can't figure out how to pass the file path into the template.

 var draftFiles = [
@foreach(var a in Model.InvoiceDraftCopies)
{
@:{ name: "@(a.FileName)", extension: "@(a.FileExtension)", size: "@(a.FileSize)", path: "@(a.FilePath)" },
}
];

template: kendo.template("<a href='#=path#' target='_blank'>#=name#</a><button type='button' class='k-upload-action'></button>")

I added "path" to the initialfiles array, but can't get to it in the template.  I get an error on #=path#. ('path' is undefined).

[Dimiter Madjarov]

Hello Fred,

Indeed currently custom properties, except name, size and extension, cannot be accessed in the template. A workaround would be to iterate the upload files list on document.ready and manually insert the links.
E.g.

$(function () {
    var model = @Html.Raw(Json.Encode(Model.InvoiceDraftCopies));
    var upload = $("#upload").data("kendoUpload");
    var filenames = upload.wrapper.find(".k-filename");

    for (var i = 0; i < filenames.length; i++) {
        $(filenames[i]).html("<a href='" + model[i].FilePath+ "'>" + model[i].FileName + "</a>");
    }
});

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik

 

 

[Lali]

Hi, 

This post is very helpful to me.

but I want to pass the file name to other function on click in this.

My code is

$(filenames[i]).html("<a onclick='DownloadMedia(" + filenames[i].attributes[1].nodeValue + ")'>" + filenames[i].attributes[1].nodeValue + "</a>");

 

on this, this shows error as Downloadmedia is undefined.

But i provided function. if I use ng-click and give angular function also, there is same result.

could you please provide any solution to call function in this?

 

[Plamen]

Hi,

In such case you can attach the event by using the jQuery delegation as for example it is done in this dojo.

Regards,
Plamen
Telerik by Progress