One file selection causes multiple instances are created

[Sebastian]

Hi, I have Kendo with Visual Studio 2012, MVC 3 and IE 8. The upload functionality is not working as expected. See the attached image. The upload control is used in a partial view which is showed as a pop up, and when I select a file to upload, this file is uploaded twice. Could you give me a clue to correct this behavior ?
Thanks !!

@(Html.Kendo().Upload()
          .Name("files")
          .Multiple(true)
          .Events(e => e
               .Select("onUploadFileSelect")
               .Upload("onUpload")
               .Remove("onRemove")
               )
          .Messages(config => config.Select(Html.RawLocalized(GlobalMessageKeys.Browse).ToString()))
          .Async(a => a
                        .Save("SaveData", "ManageBuilding")
                        .Remove("RemoveData", "ManageBuilding")
                    )

                )

[T. Tsonev]

Hello,

The most likely cause for this problem is that the Upload is initialized twice. See my test page here.

It's hard to say what is the best way to address this without looking at the source code.
Something that might work is to call kendo.destroy on the Upload element before it is initialized:

<script>
$(function() {
  kendo.destroy("#files");
}
</script>

@(Html.Kendo().Upload()
  // ...

I hope this helps.

Regards,
T. Tsonev
Telerik

[Sebastian]

Hi,

I tried to apply your suggestion but it does not work. Do you have any other idea ?
This could be a bug of the version that I am using ?

Thanks.

[T. Tsonev]

Hi,

I assume that you don't get this problem if the Upload is outside the pop-up?

If this is the case then I'd like to see the markup & code you use for creating the pop-up.
Ideally, this should be a running sample, but I should be able to provide some hints from partial code.

Regards,
T. Tsonev
Telerik

[Sebastian]

Hi, here is the javascript, markup and controller that I use.

//This function initializes the page events
$(document).ready(function () {
    initializeFloorPage();
});

//This function initializes the page events
function initializeFloorPage() {
    //Floor grid buttons
    $(document).off('click', '#btnAddFloor');
    $(document).on('click', '#btnAddFloor', insertFloorEvent);
    $(document).off('click', '#btnEditFloor');
    $(document).on('click', '#btnEditFloor', updateFloorEvent);

    // Init modal window
    $('#windowManageFloors').dialog({
        closeOnEscape: false,
        open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
        autoOpen: false,
        height: 280,
        width: 420,
        modal: true,
        resizable: false,
        draggable: false,
        buttons: {
            "Cancel": cancel,
            "Save": save
        }
    });
}

var isInsertEventFloor = false;

// This function opens the modal window with the data of the user selected item.
function updateFloorEvent(e) {
    e.preventDefault();
    clearValidationErrors();
    $('#ManageFloor').off();
    var building = WPGrid.getSelectedRow();
    var floor = WPGridFloor.getSelectedRow();
    if (floor != null) {
        $('.ui-dialog-title').text('Edit Floor');
        $('#ManageFloor').attr('action', '/Maintenance/ManageBuilding/UpdateFloor');
        $('#FloorBuildingId').val(building.BuildingId);
        $('#FloorId').val(floor.FloorId);
        $('#FloorDesc').val(floor.FloorDesc);
        $('#FloorActive').data('kendoDropDownList').value(floor.FloorActive + '');
        $('#MapPath').val(floor.MapPath);
        isInsertEventFloor = false;
        initWatermarksEventsFloor();
        $("#windowManageFloors").dialog("open");
    } else {
        PleaseSelectAnItemToProceed();
    }
}

@model ManageFloorViewModel
@using (Html.BeginForm("", "Floor", FormMethod.Post, new { id = "ManageFloor" }))
{
    <text>
    @Html.HiddenFor(o => o.FloorBuildingId)
    @Html.HiddenFor(o => o.FloorId)
    <div class="controlBlock">
        <p>
            <label>* @Html.RawLocalized(FloorMessageKeys.Floor)</label>
            @Html.TextBoxFor(o => o.FloorDesc, new {@class="WaterMarkedTextBox"})
        </p>
        <p>
            @Html.ValidationMessageFor(o => o.FloorDesc)
        </p>
    </div>
    <div class="controlBlock">
        <p>
            <label>@Html.RawLocalized(FloorMessageKeys.FloorActive)</label>
        </p>
        @(Html.Kendo().DropDownList()
                        .BindTo(Model.YesNoList)
                        .HtmlAttributes(new { style = "width: 200px; " })
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .Name("FloorActive")
        )
    </div>
    <div class="controlBlock">
         <p>
            <label>@Html.RawLocalized(FloorMessageKeys.FloorMapPath)</label>
         </p>

        @(Html.Kendo().Upload()
                .Name("files")
                .Multiple(true)
                .Events(e => e
                    .Select("onSelect")
                    .Upload("onUpload")
                    .Remove("onRemove")
                    )
                .Messages(config => config.Select(Html.RawLocalized(GlobalMessageKeys.Browse).ToString()))
                .Async(a => a
                    .Save("SaveData", "ManageBuilding")
                    .Remove("RemoveData", "ManageBuilding")
                )
            )
    </div>
</text>
}

public ActionResult SaveData(HttpPostedFileBase files)
        {
            // The Name of the Upload image or video is "files"
            if (files != null)
            {
                if (files.FileName.EndsWith(".jpeg") || files.FileName.EndsWith(".jpg"))
                {
                    uploadresource upload = new uploadresource()
                    {
                        streamfile = files.inputstream,
                        name = files.filename,
                        type = files.gettype().tostring()
                    };

                    uploadresourceresponse uploadresource = servicelocator.maintenanceservice.uploadresource(upload);
                    upload.streamfile.dispose();
                    upload.streamfile.close();
                    return this.Content(string.Empty);
                }
            }

            // Return an empty string to signify success
            return this.Content("Error");
        }

        public ActionResult RemoveData(string[] fileNames)
        {
            if (fileNames != null)
            {
                foreach (var fullName in fileNames)
                {
                    var fileName = System.IO.Path.GetFileName(fullName);
                    var physicalPath = System.IO.Path.Combine(Server.MapPath("~/App_Data"), fileName);
                    ////// TODO: Verify user permissions
                    if (System.IO.File.Exists(physicalPath))
                    {
                    //// The files are not actually removed in this demo
                        System.IO.File.Delete(physicalPath);
                    }
                }
            }
            //// Return an empty string to signify success
            return this.Content(string.Empty);
        }

thanks.

[T. Tsonev]

Hi,

I see that you're using the Dialog widget from jQuery UI, but my attempts to reproduce the double upload with it failed:
http://jsbin.com/OvuBuV/4/edit

Perhaps you can substitute the versions of jQuery/jQuery UI/Kendo UI with the ones you use to see if that makes any difference.
I'd also give Kendo UI Window a try - just to check that this problem is not caused by the Dialog implementation.

Regards,
T. Tsonev
Telerik