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

Using RadCaptcha with RadProgressManager

3 Answers 108 Views
Captcha
This is a migrated thread and some comments may be shown as answers.
scott
Top achievements
Rank 1
scott asked on 18 Oct 2011, 12:04 AM
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>

3 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 20 Oct 2011, 12:29 PM
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
0
scott
Top achievements
Rank 1
answered on 20 Oct 2011, 04:28 PM
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?
0
Accepted
Slav
Telerik team
answered on 24 Oct 2011, 02:04 PM
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
Tags
Captcha
Asked by
scott
Top achievements
Rank 1
Answers by
Slav
Telerik team
scott
Top achievements
Rank 1
Share this question
or