Upload widget inside jQueryUI dialog box problems

2 posts, 0 answers
  1. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 19 Apr 2013 Link to this post


    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).

    <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;">       
                .Async(a => a
                    .Save("Save", "Upload")
                    .Remove("Remove", "Upload")
                .Events(e => e
                    function(e) {   
                     e.data = { jobNumber: $("#Customer_Number").val(), mode:"photos" };
                    function(e) {   
                     e.data = { jobNumber: $("#Customer_Number").val(), mode:"photos" };
    function uploadPhotos(customerId) {
            autoOpen: false,
            resizable: false,
            draggable: true,
            modal: true,
            width: 470,
            title: "Upload Photos for Customer " + customerId,
            buttons: {
                "Close": function () {
    funtion uploadPhotos is called by buttons on a kendoGrid.

    .ui-dialog .k-upload-button  input
        z-index:auto !important;
    When I take the upload widget out of the dialogbox everything works fine.

    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!


  2. Dimo
    Dimo avatar
    8471 posts

    Posted 22 Apr 2013 Link to this post

    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.


    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top