Using RadCaptcha with RadProgressManager

[Scott]

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>

[Slav]

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

[Scott]

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?

[Slav]

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