Wizard with Upload Component

[Tobias]

Hello,

is it possible to Add the Upload Component in the Wizard. I tried it by myself but if i upload a file i get two files. My Issue is the Same like this:

https://stackoverflow.com/questions/54467957/kendo-upload-duplicating-file-after-initial-file-selection

Can Somebody post a code snippet?

 

Here is my test:

 

<div id="wizard">
    <div>
        <h1>Upload Labeling File</h1>
        @(Html.Kendo().Upload()
            .Name("files")
            .Async(a=> a.SaveUrl("./Masterdata/LabelExport?handler=Save")
            .RemoveUrl("./Masterdata/LabelExport?handler=Save")
            )
            .Validation(validation => validation.AllowedExtensions(new string[] { ".json" }))
            .Validation(validation => validation.MaxFileSize(2000000))
            )

            <h3>Click "Next" </h3>
    </div>
        <div>
            <h1>Personal data</h1>
            <form class="k-form">
                <div class="k-form-container">

                    <div class="k-form-field">
                        <label>Name: <input type="text" id="drop"></label>
                    </div>
                    <div class="k-form-field">
                        <label>Surname: <input type="text"></label>
                    </div>
                </div>
            </form>
        </div>
        <div>
            <h1>Contacts data</h1>
            <form class="k-form">
                <div class="k-form-container">
                    <div class="k-form-field">
                        <label>Telephone: <input type="text"></label>
                    </div>
                    <div class="k-form-field">
                        <label>Mail: <input type="text"></label>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        $("#wizard").kendoWizard({
            steps: [{
                title: "Welcome",
            }, {
                title: "Personal Details",
            }, {
                title: "Contact Details"
            }]
        });
    </script>

 

[Misho]

Hi,

Based on the information you have provided about your setup it is notable that the wizard component is initialized through the jQuery initialization https://docs.telerik.com/kendo-ui/controls/navigation/wizard/overview . On the other hand for the Upload widget the HTML helpers are used: https://docs.telerik.com/aspnet-core/html-helpers/overview 

What I suggest you is to try to make the implementation more consistent by using only the jQuery or HTML helpers only in your project.

What you could try is also to apply Deffered initialization of Kendo Upload Widget: https://docs.telerik.com/aspnet-core/getting-started/helper-basics/fundamentals#deferred-initialization 

In addition you could consider initializing the widgets in the document.ready event and see how the behavior changes.

I hope this helps.

Please don't hesitate to contact us again if a specific issue pops up or in case you have other feedback or questions related to Telerik  components.

Looking forward to your feedback.

Best Regards,
Misho
Progress Telerik