Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

diasalbe upload button till file is selected

5 Answers 437 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
JJ
Top achievements
Rank 1
JJ asked on 16 Jan 2012, 07:13 PM
How can I disable the upload button till a file is selected? I tried to set the upload enable=false then use

 

 

<telerik:radupload id="RadUpload1" OnClientFileSelected="ClientFileSelected"  runat="server" ControlObjectsVisibility="None"  text="BROWSE" targetfolder="uploads" ></telerik:radupload>

but not work

in javascript ClientFileSelected

 

I used below, not work
document.getElementById("Mygrid_ctl00_ctl04_btnUpload").disabled = true;

Thanks

5 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 17 Jan 2012, 10:12 PM
RadUpload-ClientSideValidation.png
jj:

You can use RadUpload with an ASP.NET custom validator. CustomValidator supports both client-side and server-side validation. Validating client-side has the advantage that the CustomValidator prevents the page from submitting when there are selected files that the client-side validation function considers invalid. The validation function can use the validateExtensions() client-side method to validate file extensions on the client.

So, instead of disabling/enabling the "Submit" or "Upload" button, a better option is to use Required Field Validation to verify if an allowed file type has been added in the RadUpload File Input. I implemented this functionality in a quick demo. If there's no file selected and you click submit, the error message appears: "Please select at least one allowed file type" and there is no upload allowed until the end user selects a file that has an allowed extension.

Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
<telerik:radupload id="RadUpload1" initialfileinputscount="1" allowedfileextensions=".png,.jpg,.txt"
    targetfolder="~/uploads" runat="server"></telerik:radupload>
<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="validateRadUpload"
    ErrorMessage="Please select at least one allowed file type" OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
        <asp:Button runat="server" ID="Button1" Text="Submit" />
        <script type="text/javascript">
            function validateRadUpload(source, e) {
                e.IsValid = false;
                var upload = $find("<%= RadUpload1.ClientID %>");
                var inputs = upload.getFileInputs();
                for (var i = 0; i < inputs.length; i++) {
                    //check for empty string or invalid extension    
                    if (inputs[i].value != "" && upload.isExtensionValid(inputs[i].value)) {
                        e.IsValid = true;
                        break;
                    }
                }
            }
        </script>
    </div>
    </form>
</body>
</html>
 
See the "radupload_clientsidevalidation.png" screenshot which shows display if no file has been selected and you click "Submit" button.

Hope this helps.
0
JJ
Top achievements
Rank 1
answered on 17 Jan 2012, 10:21 PM
Thanks for the posting. That's what we currenly using. But our user doesn't want to see the error message. It's kind of headache for me. Please help if you can.

Thanks.
0
Richard
Top achievements
Rank 1
answered on 17 Jan 2012, 11:39 PM
RadUploadButtonDisabled.png
RadUploadButtonEnabled.png
JJ:

I've reworked it to use a RadButton that disabled on load. Once a file is selected in the FileInput, the OnClientFileSelected="ClientFileSelected" enables the button. Is this what you seek?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        function ClientFileSelected(source, eventargs) {
            var button = $find("<%= RadButton1.ClientID %>");
            button.set_enabled(true);
        }
 
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadUpload ID="RadUpload1" OnClientFileSelected="ClientFileSelected" runat="server"
            ControlObjectsVisibility="None" text="BROWSE" TargetFolder="uploads">
        </telerik:RadUpload>
        <telerik:RadButton runat="server" Enabled="false" ID="RadButton1" Text="Submit" />
    </div>
    </form>
</body>
</html>

See screenshots: "raduploadbuttondisabled.png" and "raduploadbuttonenabled.png".

Hope this helps!
0
JJ
Top achievements
Rank 1
answered on 18 Jan 2012, 04:45 PM
thanks!

I have the button nested in my grid.  var button = $find("<%= RadButton1.ClientID %>") get error RadButton1 does not exist in the current context

if I tried document.getElementById("MyGrid_ctl00_ctl04_RadButton1").disabled = true; not work
I also tried
var btn=document.getElementById("MyGrid_ctl00_ctl04_RadButton1");
btn.set_enabled(true); got can not find this method error.
is there any condition (control) for using set_enabled?

0
Richard
Top achievements
Rank 1
answered on 18 Jan 2012, 06:45 PM
JJ:

Try wrapping the ClientFileSelected function in a RadCodeBlock, as follows:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
  <script type="text/javascript">
        function ClientFileSelected(source, eventargs) {
            var button = $find("<%= RadButton1.ClientID %>");
            button.set_enabled(true);
        }
  
    </script>
</telerik:RadCodeBlock>

This may help to find the control.

Otherwise, take a look at the Accessing server controls in a grid template on the client code library for the way to locate the button.

Hope this helps!
Tags
Upload (Obsolete)
Asked by
JJ
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
JJ
Top achievements
Rank 1
Share this question
or