Upload template link to files

4 posts, 1 answers
  1. Fred
    Fred avatar
    4 posts
    Member since:
    Jul 2012

    Posted 15 Jul 2015 Link to this post

    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).

  2. Answer
    Dimiter Madjarov
    Dimiter Madjarov avatar
    2312 posts

    Posted 17 Jul 2015 Link to this post

    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.

    $(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.

    Dimiter Madjarov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Lali
    Lali avatar
    2 posts
    Member since:
    May 2017

    Posted 04 May 2017 in reply to Dimiter Madjarov Link to this post


    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?


  4. Plamen
    Plamen avatar
    3080 posts

    Posted 07 May 2017 Link to this post


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

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top