Disable Choose File Button on Upload Control

[Mark]

I'm using the Kendo for ASP.Net MVC Upload control. I'm on version 2019, and upgrading right now is not an option unfortunately. When the user chooses a file (multi-select is off), I have a Submit button separate from the control that the user clicks to begin the upload. While the upload is taking place, I want the Choose File button to be disabled. I need the pause and cancel buttons enabled, so it won't work to disable the entire control. I have a place to put some javascript to disable the button, but everything I've tried so far doesn't accomplish disabling the button. 

Here is the declaration of the control:

                        <div id="uploadControlContainer" class="upload-input col-sm-12">
                            @(Html.Kendo().Upload()
                                .Name("chunkContent")
                                .Async(a => a
                                    .Batch(false)
                                    .Save("UploadLargeFileChunk", "DocumentUpload")
                                    //.Remove("Remove", "DocumentUpload") not implemented
                                    .AutoUpload(false)
                                    .ChunkSize(Model.ChunkSize)
                                    .AutoRetryAfter(Model.AutoRetryAfter)
                                    .MaxAutoRetries(Model.MaxAutoRetries)
                                )
                                .Multiple(false)
                                .Events(e => e.Select("onSelectFile"))
                                .Events(e => e.Upload("onUploadChunk"))
                                .Events(e => e.Cancel("onCancelUpload"))
                                .Events(e => e.Success("onUploadSuccess"))
                                .Events(e => e.Error("onUploadError"))
                                .Messages(m => m.Select("Choose File"))
                            )
                        </div>

 

[Mihaela]

Hello Mark,

You can disable the "Choose File" button by adding "k-disabled" class with jQuery, as per the example below:

<script>
function onUploadChunk(e) {
  var fileForUpload = e.files;
  if(fileForUpload) {
    $(".k-upload-button-wrap .k-button").addClass("k-disabled"); // Disable the "Choose File" button
  }
}

function onUploadSuccess(e) {
  $(".k-upload-button-wrap .k-button").removeClass("k-disabled");  // Enable the "Choose File" button when the Upload operation is completed successfully.
}

function onUploadError() {
    $(".k-upload-button-wrap .k-button").removeClass("k-disabled");  // Enable the "Choose File" button when the Upload operation fails.
}
</script>

Would you give this example a try and let me know how it goes at your end?

Regards,
Mihaela
Progress Telerik

[Mark]

Hello Mihaela, with this code in place (verified in Sources), I can still click the button to open a file selection dialog. I did, however, find a way to hide the button:

                const uploadWidget = $("#chunkContent").data("kendoUpload");
                const chooseFileButton = uploadWidget.wrapper.find(".k-upload-button");
                chooseFileButton.hide();

Maybe that will be an acceptable alternative.

Thank you,

Mark

[Mihaela]

Hi Mark,

When adding the "k-disabled" class, the following CSS styles are applied to the respective element:

Since you can click the button, most probably the styles of the "k-disabled" class are not applied as expected at your end. You can try creating a custom class that has these CSS styles or add the property "disabled", as per the example below:

$(".k-upload-dropzone").prop("disabled", true); // Disable the dropzone element that contains the button
$(".k-upload-button-wrap .k-button").prop("disabled", true); // disable the button only

Hiding the button, as per your suggestion, is an applicable option, too.

Best,
Mihaela