This is a migrated thread and some comments may be shown as answers.

Upload Button Reference

3 Answers 99 Views
Upload
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Mark
Top achievements
Rank 1
Mark asked on 08 Feb 2012, 07:47 PM
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?

3 Answers, 1 is accepted

Sort by
0
John DeVight
Top achievements
Rank 1
answered on 08 Feb 2012, 09:34 PM

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

0
Mark
Top achievements
Rank 1
answered on 09 Feb 2012, 01:51 AM
That did the trick! Works like a charm.

Thanks,
Mark

0
Maks
Top achievements
Rank 1
answered on 23 May 2012, 08:59 AM
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)
            )
      )
Tags
Upload
Asked by
Mark
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Maks
Top achievements
Rank 1
Share this question
or