Set template in kendo upload without upload click/select

[Manlio]

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

[Tsvetina]

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

[Manlio]

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

[Tsvetina]

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