One file selection causes multiple instances are created

6 posts, 0 answers
  1. Sebastian
    Sebastian avatar
    5 posts
    Member since:
    Apr 2013

    Posted 28 Aug 2013 Link to this post

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

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 30 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Sebastian
    Sebastian avatar
    5 posts
    Member since:
    Apr 2013

    Posted 03 Sep 2013 Link to this post

    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.
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 04 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Sebastian
    Sebastian avatar
    5 posts
    Member since:
    Apr 2013

    Posted 15 Sep 2013 Link to this post

    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.

  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 16 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready