Upload Button Reference

[Mark]

Need a reference to the Upload Files button. I am implementing a file upload dialog with the Upload control as one of several controls present. My UI requirement is to use the traditional OK and Cancel buttons to complete the upload and associated meta information submission. I am not using the auto upload feature. The Upload button is rendered by the control as part of the Select button event sequence, and so is not present until the user has selected a file to upload load. I want to hide the button before the user sees it.

How can I get a reference to the Upload Files button, so that i can hide it, and then "click" the button as part of the OK button event handler?

[John DeVight]

Mark,

You can implement the OnSelect client event to hide the "Upload Files" button.  However, when the OnSelect event handler is called, the "Upload Files" button hasn't been rendered yet.  Using the setInterval javascript function, you can call another function to look for the "Upload Files" button, and when it is foumd, hide the button, clear the interval, and enable the "OK" button.

Let's say you had the following upload control and OK button defined:

@(Html.Telerik().Upload()
        .ClientEvents(events => events
            .OnSelect("onSelect")
        )
        .Name("upload")
        .Multiple(false)
        .Async(async => async
            .Save("UploadFile", "Home")
            .AutoUpload(false)

        )
)

<br />

<button id="okButton" onclick="okButton_click();" disabled="disabled">OK</button>

The onSelect javascript function would set the interval like this:

var _intervalId;

onSelect = function (e) {
    // Every 10 miliseconds, try to hide the upload button.
    _intervalId = setInterval("hideUploadButton();", 10);
}

The hideUploadButton javascript function would look for the button, and if found, hide the button, clear the interval and enable the "OK" button:

hideUploadButton = function () {
    // Try and find the upload button.
    var button = $('#upload').closest('div.t-upload').find('button.t-upload-selected');

    // If the upload button was found...
    if (button.length > 0) {
        // Hide it.
        button.css({
            visibility: 'hidden',
            position: 'absolute'
        });

        // Terminate the interval.
        clearInterval(_intervalId);

        // Enable the OK button.
        $('#okButton').removeAttr('disabled');
    }
}

When the "OK" button is clicked, the okButton_click javascript function is called.  The okButton_click would look for the "Upload Files" button and click it:

okButton_click = function () {
    // Find the upload button.
    var button = $('#upload').closest('div.t-upload').find('button.t-upload-selected');

    // If the upload button was found...
    if (button.length > 0) {
        // Click it.
        button.click();
    }
}

Hope this helps...

Regards,

John DeVight

[Mark]

That did the trick! Works like a charm.

Thanks,
Mark

[Maks]

you can also do as follows (to hide your upload button):

@section HeadContent {
<style type="text/css">
    .t-widget.t-upload.newclass .t-button.t-upload-selected<br>
    {
        display:none;
    }
</style>
}

   

@(Html.Telerik().Upload().Name("pic").HtmlAttributes(new { @class="newclass"})
            .Multiple(false)
            .Async(async => async
            .AutoUpload(false)
            )
      )