Set template in kendo upload without upload click/select

4 posts, 0 answers
  1. Manlio
    Manlio avatar
    5 posts
    Member since:
    Apr 2017

    Posted 26 Apr Link to this post

    Hello,

    I created a small module with a upload kendo input.

    This input has a template.

    When I uploading a file by clicking on the kendo load button, the file is loaded and the kendo upload shows everything in my template.

    But how can I initialize the model without clicking on the kendo loading button?

    I get a src in byte64 from my database and set it in the template variable, but the template is not show. With the function "FillViewModelFromResponse".
    When i set this byte64 from the function "onSelect" of my model view, the template is show

    HTML:

    01.<input name="logo" id="a-gst-logo" type="file"
    02.accept=".jpg,.png"
    03.data-role="upload"
    04.data-async="false"
    05.data-multiple="false"
    06.data-template="template"
    07.data-bind="events: {select: onSelect}" />
    08. 
    09.<script id="template" type="text/x-kendo-template">
    10.    <div id="divTemplate" class='file-wrapper'>
    11.        <button type='button' class='k-upload-action'></button>
    12.        <img id="imageLogo" data-bind="attr: {src: logoSrc}"/>
    13.        <h4 class='file-heading file-name-heading' data-bind="text: logoNome"></h4>
    14.    </div>
    15.</script>

     

    JS:

    01.$(document).ready(function () {
    02.    vm = kendo.observable({
    03.        logo: null,
    04.        logoNome: null,
    05.        logoSrc: null,
    06.        onSelect: function(e){
    07.            if(!Utils.isNullOrUndefined(e.files)){
    08.                for (var i = 0; i < e.files.length; i++) {
    09.                    var file = e.files[i].rawFile;
    10.                    var name = e.files[i].name;
    11.                    vm.set("nomeImmagine", name);
    12.                    if (file) {
    13.                        var reader = new FileReader();
    14.                        reader.onloadend = function() {
    15.                            vm.set("logo", this.result.substring(this.result.search("base64,")+7));
    16.                            vm.set("logoSrc", this.result);
    17.                            vm.set("logoNome", vm.nomeImmagine);
    18.                            A_Gst.KendoBind("divTemplateLogo");
    19.                        };
    20.                        reader.readAsDataURL(file);
    21.                    }
    22.                }
    23.            }
    24.        },
    25.        FillViewModelFromResponse: function(data){
    26.            vm.set("logo", data.gst.logoBase64);
    27.            vm.set("logoNome", data.gst.logoNome);
    28.             
    29.        }
    30.    });
    31.     
    32.    KendoUtils.bind(idForm, vm);
    33.});

     

        Ps. I cleaned the code, but some wrong code maybe remaining

  2. Tsvetina
    Admin
    Tsvetina avatar
    2087 posts

    Posted 28 Apr Link to this post

    Hi Manilo,

    If I understand correctly, you want to display the content from your template before the Upload has loaded a file. Since the Upload has only a template for displaying selected file info, you will need to define such a UI yourself, without using the Upload APIs and template.

    What you can do is:
    1) Render a placeholder element that contains the same HTML as the Upload template right after the upload input.
    2) Bind the placeholder visibility to a property in the model.
    3) Set the visibility property to false in the Upload select event. Optionally set it to true in the clear event.

    You will probably also need to customize the upload UI to make it less visible that the placeholder is a separate element, for example, overwrite upload styles to hide bottom borders of the file area.

    Regards,
    Tsvetina
    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.
  3. Manlio
    Manlio avatar
    5 posts
    Member since:
    Apr 2017

    Posted 09 May in reply to Tsvetina Link to this post

    Thank you for the answer.

    I was hoping there was a way with kendo.

     

    I think you will must to implement the template without the initialization of the kendo ui widget.

     

    Thank

  4. Tsvetina
    Admin
    Tsvetina avatar
    2087 posts

    Posted 10 May Link to this post

    Hi Manilo,

    You can submit a feature request in the Kendo UI Feedback portal for adding an empty/no-file-selected template to the Upload widget. This will give better visibility to your suggestion and will let others vote for your idea. If there is high user interest, the feature will be considered for future implementation.

    Regards,
    Tsvetina
    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