Angular JS: display files previously loaded + make the files downloadable

6 posts, 0 answers
  1. Labhesh
    Labhesh avatar
    23 posts
    Member since:
    Sep 2015

    Posted 18 Oct Link to this post

    Hi, I am using the upload widget with angular. 

    I am looking for it to achieve the following:

    1) have something like k-files = "initialFiles" in the input options; to display list of previously loaded files. 

    I tried using k-files along with in javascript code; but that does not work.. how do I make this feature work? 

    2) Is there a way to use template (again using angular) to make the previously uploaded files downloadable? I saw a similar post but it had no examples. Can you give a small example on how to do this? 

    Thanks

    $scope.initalFiles = [ { name:"test1.txt" }, {name: "test2.txt" } ];
    <p><input name="files"<br>    id="files"<br>    type="file"<br>    kendo-upload="uploader"<br>    k-select="onSelect"<br>    k-success="onSuccess"</p><p>k-files = "initialFiles"</p><p>    k-async="asyncOptions"/></p>
  2. Labhesh
    Labhesh avatar
    23 posts
    Member since:
    Sep 2015

    Posted 18 Oct Link to this post

    I've got the #1 above to work using k-options...but I still need help with enabling the files to be downloaded

     

    $scope.uploadOptions = {<br>    async : {<br>        saveUrl: baseURL+"upload",<br>        removeUrl: baseURL+"remove",<br>        autoUpload: true<br>    },<br>    files : $scope.initialFiles<br>};
  3. Kendo UI is VS 2017 Ready
  4. Labhesh
    Labhesh avatar
    23 posts
    Member since:
    Sep 2015

    Posted 18 Oct Link to this post

    I've gotten #1 to work, but I still need help with downloading the uploaded files

     

    $scope.uploadOptions = {async : {saveUrl: baseURL+"upload",removeUrl: baseURL+"remove",autoUpload: true},files : $scope.initialFiles};

     

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 19 Oct Link to this post

    Hello Labhesh,

    Yes, the Upload widget supports displaying the files in the list via template. Here is a sample approach to achieve this.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. Labhesh
    Labhesh avatar
    23 posts
    Member since:
    Sep 2015

    Posted 19 Oct in reply to Dimiter Madjarov Link to this post

    Thanks - Dimiter; 

    Is there a way to write templates in the script that contains the angular code?

    To be specific ; can this line be moved into the angular script? The reason is I'd like to form the download dynamically where host is based on whether one is in testing or production

        <script id="fileTemplate" type="text/x-kendo-template"><br>       <a href="<downloadUrl>">#= name #</a><br>      <button type='button' class='k-upload-action'></button><br>    </script>

     

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 20 Oct Link to this post

    Hello Labhesh,

    Yes, you could build the template in the controller and don't rely on an external script tag element. The template property itself could be set to a string or a function:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/upload#configuration-template

    For convenience I modified the example.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready