How to Upload Image and Show Image in Kendo Wizard

[Stark]

Hello, I have some problem when use Kendo Upload + Kendo Wizard.

Specifically I'm doing a Kendo Wizard with an .html file.

In the .html file of step 1, I used Kendo Upload to Upload Image.

Then It will show up in the .html file of step 2. But now I can only show in step 1 and I don't know how to show it in step 2

Please help me, thanks!!!

My Kendo Wizard Code:

$("#wizard").kendoWizard({
        loadOnDemand: true,
        reloadOnSelect: false,
        steps: [
            {
                title: "Upload",
                icon: "upload",
                successIcon: "check",
                buttons: ["next"],
                contentUrl: "./step1.html"
            }, {
                title: "Settings",
                icon: "gear",
                successIcon: "check",
                contentUrl: "./step2.html"
            }, {
                title: "Check All",
                icon: "preview",
                successIcon: "check",
                buttons: ["previous", "next"],
                contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
            }, {
                title: "Save",
                icon: "save",
                successIcon: "check",
                buttons: ["previous", "done"],
                contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
            },
        ],
        done: function (e) {
            e.preventDefault();
            var form = $("form").getKendoForm();
            var zxy = $("#title").val();

            console.log(zxy);

            if (e.sender.stepper.steps()[1].options.error) {
                e.sender.stepper.steps()[1].setValid(true);
                e.sender.stepper.steps()[2].setValid(true);
            }

            kendo.alert("Thank you for registering!");

        },

        reset: function () {
            var form = $("form").getKendoForm();

            if (form) {
                form.clear();
            }
        }
    });

My step1 is Kendo Upload

<inputname="files"id="files"type="file"/>

$("#files").kendoUpload({
        async: {
            chunkSize: 11000,// bytes
            saveUrl: "https://demos.telerik.com/kendo-ui/upload/chunksave",
            removeUrl: "https://demos.telerik.com/kendo-ui/upload/remove",
            autoUpload: true
        },
        validation: {
            allowedExtensions: [".jpg", ".jpeg", ".png", ".bmp", ".gif"]
        },
        success: onSuccess,
        showFileList: true,
    });
    function onSuccess(e) {
        if (e.operation == "upload") {
            for (var i = 0; i < e.files.length; i++) {
                var file = e.files[i].rawFile;
                if (file) {
                    var reader = new FileReader();
                    reader.onloadend = function () {
                        $("<div class='product'><img src=" + this.result + " /></div>").appendTo($("#products"));
                    };
                    reader.readAsDataURL(file);
                }
            }
        }
    }

My step 2 is form, I want to show the image uploaded in step 1 above the form. And I'm having trouble here

<form>

<div class="wrapper">

 
<div id="products"></div>
</div>

<input type="text" id="title" name="title" class="k-textbox" />
</form>

Demo:

Step 1: Upload (Image step1.png)

Step2: Input Information (Image step2.png)

[Aleksandar]

Hi Stark,

Looking at the configuration of the Wizard I see that you have set the loadOnDemand configuration options to true. This means that the of the Step will be loaded on demand when a it is selected. This is applicable for the scenario you have as the step configuration has "contentUrl" set. With the provided configuration, when you upload an image successfully and try to append it to an element in the second step, the element is still not available, thus the image will not be displayed. 

Try setting the loadOnDemand to false in order to achieve the desired result.

Regards,
Aleksandar
Progress Telerik