diasalbe upload button till file is selected

Thread is closed for posting
6 posts, 0 answers
  1. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 16 Jan 2012 Link to this post

    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

  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 17 Jan 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 17 Jan 2012 Link to this post

    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.
  5. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 17 Jan 2012 Link to this post

    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!
  6. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 18 Jan 2012 Link to this post

    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?

  7. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 18 Jan 2012 Link to this post

    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!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017