Kendo Upload Duplicating File After Initial File Selection

We are using Telerik ASP.NET MVC VSExtensions 2019.1.116.1 and have an MVC app using the Upload control. The issue we are facing is the first time we open the upload control and select a file from the file explorer it is duplicating the selected file in the control.

We are using the async option and it is going to our controller one time to process the file but it is displaying the same file twice. It sets the status to success on the first file but it never closes out as the Uploading icon keeps being displayed and the "second" file is never sent to the controller.

If we close this control and then re-click the button to open the control and select a file, it only displays the file once and calls the controller to process the file and works as expected.

Also if we reload the page and then use drag & drop it works as expected, so its only the first time we load the page and click the Select Files button that it duplicates the displayed file.

We are using a hidden "div" for the upload control and associated text/buttons and then we have a button that displays that div.

<div id="cdpUploadScheduleEvents" style="display: none; border-style:solid">
    <p class="panel panel-info">
        Please select the file.
    </p>
    @(Html.Kendo().Upload().Name("files"))

    <div style="width: 15%; margin: auto;">
        <button id="closeUploadBtn"class="button btn4 center-block btn-block" onClick="CloseUploadPane()">Close</button>
    </div>
</div>

We initialize the kendo control in the $(document).ready:

     $("#files").kendoUpload({
            multiple: false,
            async: {
                saveUrl: '@Url.Action("UploadFile", "MyCtl", new {masterId = @Model.masterId})',
                removeUrl: '',
                autoUpload: true
            },
            error: onKendoError,
            complete: onKendoComplete,
            upload: onKendoUpload,
            select : onKendoSelect,
            validation: {
                allowedExtensions: [".csv", ".xls", ".xlsx"]
            }
        });

Here is my OnSelect and I have an alert in there that displays the number of files and it always shows that 1 file is selected:

 function onKendoSelect(e) {
        var selectedFiles = e.files.length;
        alert('Files selected ' + selectedFiles);
        if (selectedFiles > 1) {
            $(".k-upload-files > li:eq(1)").remove();
        }
    };

Not sure why the first time the control is used it is duplicating and every time after that if functions correctly or why the Drag & Drop works correctly every time.

You are initializing the upload widget twice. I guess that's the reason it behaves so strangely. Simply put all the initialization into the Razor code and remove the stuff from $(document).ready.