Using RadCaptcha with RadProgressManager

4 posts, 1 answers
  1. scott
    scott avatar
    35 posts
    Member since:
    Mar 2011

    Posted 17 Oct 2011 Link to this post

    I am trying to add a RadCaptcha validation control to a page that allows file uploads. What is happening is that the file progress area is shown prior to Captcha validation, so if the Captcha is invalid, the user has to wait for the progress of the file upload before the message displays that they have type invalid Captcha text.

    Is there any way around this to have the Captcha validate before the file upload progress happens?

    Page code follows.
    <%@ Page Language="VB" MasterPageFile="~/Master/master.master" AutoEventWireup="false" Inherits="xfers.test" ValidateRequest="false" Codebehind="test.aspx.vb" %>
      
    <asp:Content ID="Content1" ContentPlaceHolderID="MasterHolder" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <style>
        .RadUpload .ruFakeInput {
         background-color: #dddddd;
         cursor:not-allowed;
         }
          .ruFileInput
          { cursor: pointer;
                 
        </style>
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Windows7" />
      
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadScriptManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Radprogressmanager1" />
                        <telerik:AjaxUpdatedControl ControlID="RadProgressArea1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="Radprogressmanager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadProgressArea1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadCodeBlock1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Radprogressmanager1" />
                        <telerik:AjaxUpdatedControl ControlID="RadProgressArea1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
          
        </telerik:RadAjaxManager>
        <div style="position:absolute;z-index:1000;top:50%;left:30%;bottom:50%;right:50%;margin:auto;">
            <telerik:RadProgressManager id="Radprogressmanager1" runat="server" />
            <telerik:RadProgressArea id="RadProgressArea1" runat="server" onclientprogressbarupdating="onClientProgressBarUpdating" />
        </div>   
      
    <br />
      
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
      
        <table align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <asp:Label ID="lblErrMsg" runat="server" Visible="false" ForeColor="Red" Font-Bold="true" />
                    <table cellspacing="0" cellpadding="4" align="center" class="odehilite">
                        <tr>
                            <td align="right" nowrap="nowrap">Browse for your file: </td>
                            <td>                            
                                <telerik:radupload 
                                    id="fUpload"
                                    runat="server"
                                    maxfileinputscount="1" EnableFileInputSkinning="false"
                                    ControlObjectsVisibility="None"
                                        EnableEmbeddedBaseStylesheet="true"
                                        InputSize="50"
                                        Width="475px"
                                        OverwriteExistingFiles="true"
                                        ReadOnlyFileInputs="true"
                                    allowedfileextensions=".txt,.doc,.docx,.xls,.xlsx,.pdf,.htm,.html,.asp,.aspx,.ppt,.pptx,.pps,.ppsx,.csv,.gif,.jpg,.zip,.dat,.mdb,.xml,.smf,.dbf,.jpeg"
                                    maxfilesize="1073741824" />
      
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">
                                Image Validation
                            </th>
                        </tr>
                        <tr>   
                            <td align="center" colspan="2" style="padding-bottom: 1px;">
                                <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Incorrect validation text entered" EnableRefreshImage="true" ValidatedTextBoxID="txtValidateImage" 
                                    ValidationGroup="SubmitFile" >
                                    <CaptchaImage ImageCssClass="imageClass" EnableCaptchaAudio="true" BackgroundNoise="High" LineNoise="Medium" TextChars="LettersAndNumbers" TextLength="6" RenderImageOnly="true" />
                                </telerik:RadCaptcha>
                            </td>
                        </tr>
                        <tr>    
                            <td align="center" colspan="2" style="padding-bottom: 1px;">
                                Text from image: <asp:TextBox ID="txtValidateImage" runat="server" MaxLength="6" ValidationGroup="SubmitFile" Font-Names="'Segoe UI', Arial, sans-serif" Font-Size="12px" ToolTip="Validate image." />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center" style="padding: 0 0 2px 0;" >
                                <table width="80%" cellpadding="0">
                                    <tr>
                                        <td align="center">
                                            <asp:Button ID="btnSubmitFile" runat="server" Text="Send File" CausesValidation="true" UseSubmitBehavior="true" CssClass="RadUploadSubmit" ValidationGroup="SubmitFile" />
                                        </td>
                                        <td align="center">
                                            <asp:Button ID="btnReset" runat="server" Text="Reset" CausesValidation="false" CssClass="RadUploadSubmit" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
      
            <script type="text/javascript">
      
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                var originalClientSubmit;
      
                if (!originalClientSubmit) {
                    originalClientSubmit =
                    Telerik.Web.UI.RadProgressManager.prototype._clientSubmitHandler;
                }
      
                Telerik.Web.UI.RadProgressManager.prototype._clientSubmitHandler = function (e) {
                    if (!prm._postBackSettings.async) {
                        originalClientSubmit.apply(this, [e]);
                    }
                }
      
                //<![CDATA[
                function onClientProgressBarUpdating(progressArea, args) {
                    progressArea.updateHorizontalProgressBar(args.get_progressBarElement(), args.get_progressValue());
                    args.set_cancel(true);
                }
                //]]>
      
                function findValidator(validid) {
                    if (typeof (Page_Validators) == "undefined") return;
                    for (var i = 0; i < Page_Validators.length; i++) {
                        var vld = Page_Validators[i];
                        var str = vld.id;
                        if (str.search(validid) > -1) return vld;
                    }
                }
      
                function ValidatetxtMsg(source, arguments) {
                    if (arguments.Value.indexOf("<") == -1 && arguments.Value.indexOf(">") == -1) {
                        arguments.IsValid = true;
                    } else {
                        arguments.IsValid = false;
                    }
                }
              </script>
      
    </telerik:RadCodeBlock>
    </asp:Content>
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 20 Oct 2011 Link to this post

    Hello Scott,

    If you want to ensure that the RadCaptcha is validated before the selected files are uploaded, you can handle the ValidatingFile server-side event of the RadUpload. In the handler of this event you should validate the RadCaptcha via its method Validate in order to determine whether the validation of the RadUpload control is successful, depending of the state of the captcha control. The suggested solution is demonstrated below:
    Protected Sub Radupload1_ValidatingFile(sender As Object, e As Telerik.Web.UI.Upload.ValidateFileEventArgs) Handles Radupload1.ValidatingFile
        RadCaptcha1.Validate()
        e.IsValid = RadCaptcha1.IsValid
     
        ' if file is invalid, there is no need
        ' to proceed with integrated validation
        e.SkipInternalValidation = Not e.IsValid
    End Sub


    Best wishes,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. scott
    scott avatar
    35 posts
    Member since:
    Mar 2011

    Posted 20 Oct 2011 Link to this post

    Thank you for the response, Slav. I added the RADCaptcha1's ValidatingFile sub event as you indicated, but it is firing after the RADProgress upload window displays, so the user will still see the progress of the file upload before displaying my RADCaptcha's validation message.

    Any other ideas?
  5. Answer
    Slav
    Admin
    Slav avatar
    1355 posts

    Posted 24 Oct 2011 Link to this post

    Hi Scott,
     
    Please accept my apologies for misleading you. Indeed, the RadProgressArea is still visible even when the code is not validated. This happens because the selected files are uploaded on the server before the postback. The RadCaptcha's validation is performed after postback due to security reasons, so by the time the captcha control is validated, the specified files are already uploaded on the server.

    Nevertheless, there is another approach for such a scenario that I can suggest. You can place the RadCaptcha in an Ajax Panel and perform an Ajax request to test for the entered code. After the user has entered a valid string, then you can allow her (him) to upload the files by displaying the upload button for example.

    Kind regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top