Upload widget inside jQueryUI dialog box problems

[Pierre]

Hi,

I have 2 problems with the code bellow. 

1) If I don't set the z-index in the CSS below, the "Select..." button does not do anything when clicked on.  With the CSS in place the click event works until I upload something, after which it no longer respond.  I'd have to reload the page to get it to work again.  Drag/drop files to the drop zone works fine and the files are uploaded properly.

2) When uploading, instead of uploading each file once, it uploads each file it at least 4 times (see attached image).

HTML:

<div id="dlgUpload" style="display:none">

    <p><span class="ui-icon ui-icon-info" style="float: left; margin: 0 7px 20px 0;"></span>Photo Upload</p>

    <div style="width:100%;max-height:300px;">       

        @(Html.Kendo().Upload()

            .Name("fileUpload")

            .Async(a => a

                .Save("Save", "Upload")

                .Remove("Remove", "Upload")

                .AutoUpload(true)

            )

            .Events(e => e

                .Upload(@<text>

                function(e) {   

                 e.data = { jobNumber: $("#Customer_Number").val(), mode:"photos" };

                }

              </text>)

                .Remove(@<text>

                function(e) {   

                 e.data = { jobNumber: $("#Customer_Number").val(), mode:"photos" };

                }

              </text>)

            )

        )

    </div>

</div>


function uploadPhotos(customerId) {
    $("#dlgUpload").dialog({
        autoOpen: false,
        resizable: false,
        draggable: true,
        modal: true,
        width: 470,
        title: "Upload Photos for Customer " + customerId,
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        },
    });
    $('#dlgUpload').dialog('open');
}

funtion uploadPhotos is called by buttons on a kendoGrid.

CSS:

.ui-dialog .k-upload-button  input
{
    z-index:auto !important;
}

When I take the upload widget out of the dialogbox everything works fine.

Update:
I seem to remember something about the widget being initialize twice when running inside a dialog box!
If you look at the second image, notice there are 2 drop zones (1 in red and 1 in yellow.)  When dropping on the red zone the file uploads 4 times, on the yellow zone it uploads 8 times!

Help!!

Thanks,
PT

[Dimo]

Hello Pierre,

Generally, we do not support the Upload widget inside a jQuery dialog, because of the observed problems, which are caused by the dialog. I recommend you to use the Kendo UI Window instead.

If you prefer using the jQuery dialog, then create the dialog first, and then initialize the Kendo UI Upload client-side.

Regards,

Dimo
the Telerik team