Required validator and RadAsyncUpload

[Andrew]

I'm having trouble getting a required field validator attached to work with RadAsyncUpload.
I am using Peter Blum validation, but I imagine the problem is the same with basic .NET validators.

The Peter Blum RequiredTextValidator doesn't work with RadAsyncUpload.

Instead I tried a custom validator with the following client-side function:

function AsyncUploadRequiredValidation(cond) {
    var uploader = $find(cond.IDToEval);

    return (uploader.getUploadedFiles().length == 0) ? 0 : 1;
}

But this code throws an exception: 'getUploadedFiles is not a function'. The $find method does find something, but none of the RadAsyncUpload's client-side functions available on the returned object.

[Genady Sergeev]

Hello Andrew,

Which version of RadAsyncUpload do you use? I've tried the following function in order to validate RadAsyncUpload and it seems to work:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
    </telerik:RadScriptManager>
    <script type="text/javascript">

        function validateUpload(sender, args) {
            var upload = $find("RadAsyncUpload1");
            args.IsValid = upload.getUploadedFiles().length != 0;
        }

    </script>
    <div>
        <asp:CustomValidator runat="server" ID="CustomValidator" ClientValidationFunction="validateUpload" ErrorMessage="Error">
        </asp:CustomValidator>

        <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" TargetFolder="~/Uploads">
        </telerik:RadAsyncUpload>


        <asp:Button runat="server" ID="Button1" Text="Upload" />


    </div>

All the best,
Genady Sergeev
the Telerik team

[Shumaila Imran]

I'm using Q1 2010 SP1 and this validation function does not work with RadAsyncUpload at my end. Do you have a clue ?

[Genady Sergeev]

Hi Shumaila Imran,

In the case of Q1 2010 you can use the following code:

<script type="text/javascript">
    Telerik.Web.UI.RadAsyncUpload.prototype.getUploadedFiles = function() {
        var files = [];

        $telerik.$(".ruUploadSuccess", this.get_element()).each(function(index, value) {
            files[index] = $telerik.$(value).text();
        });

        return files;
    }

    function validateUpload(sender, args) {
        var upload = $find("RadAsyncUpload1");
        args.IsValid = upload.getUploadedFiles().length != 0;
    }

</script>

<div>
    <asp:CustomValidator runat="server" ID="CustomValidator" ClientValidationFunction="validateUpload"
        ErrorMessage="Select at least a single file">
    </asp:CustomValidator>
    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" MultipleFileSelection="Automatic"
        AllowedFileExtensions="jpg,jpeg,png,gif,bmp" MaxFileInputsCount="5" Width="280px"
        Skin="Default" MaxFileSize="2097152" ToolTip="Image must be smaller than 2MB">
    </telerik:RadAsyncUpload>
    <asp:Button runat="server" ID="Button1" Text="Upload" />
</div>

Regards,
Genady Sergeev
the Telerik team

[Shumaila Imran]

Thanks Genady. But this only works in a page without Master Page. This script does not work on a page which is derived from a Master Page.

I came to this conclusion after trying everything. Do you have an idea why this won't work in a page with Master Page ?

[Genady Sergeev]

Hello Shumaila Imran,

This is correct, the reason is that there is no RadAsyncUpload on the master page initially, it is only loaded after a content page with RadAsyncUpload is opened. Is it possible to move this code only on the pages that contain RadAsyncUpload?

Regards,
Genady Sergeev
the Telerik team

[Shumaila Imran]

You mean this code will only work in pages without master page ? We can consider this option if there is no other solution. Is there any other solution ?

[Genady Sergeev]

Hello Shumaila Imran,

No, it just for a matte of convenience. Should you place that code in a master page please use the following:

<script type="text/javascript">
        if (Telerik && Telerik.Web.UI.RadAsyncUpload) {
            Telerik.Web.UI.RadAsyncUpload.prototype.getUploadedFiles = function () {
                var files = [];

                $telerik.$(".ruUploadSuccess", this.get_element()).each(function (index, value) {
                    files[index] = $telerik.$(value).text();
                });

                return files;
            }
        }

    </script>

Regards,
Genady Sergeev
the Telerik team

[Shumaila Imran]

Thanks Genady. Sorry for getting back so late, got busy with other issues. I've tried the new code but this does not work either. I'm placing the code in the custom head content container of the Content Page containing the RadAsyncUpload control. Both of the code options do not work even though I'm not putting the script in Master Page. Do you have an idea what could I possibly be missing ?

[Peter Filipov]

Hi Shumaila,

I created a sample project that works fine with master page. Please review the attachment.

Regards, Peter Filipov
the Telerik team

[Shumaila Imran]

I was placing the code in the custom head container of the Content Page and that is why the JS wasn't firing up. Moving the code in the main content container of the content page fixed the issue.
Since I'm using dynamic binding for other JS files in the head section of Master Page, I ran into the code blocks exception. But moving the code block inside the RadCodeBlock fixed that also.

Thank you for you help.

[Konstantinos]

Ok, hi...
I run into the same problem and through this thread I tried to implement the forementioned solutions.
However no matter which code I put in my design, I can't get it to work due to a "getUploadedFiles" is null exception.

Well, since the point is to catch a null upload field, how can I do that without not calling this function and eventually running into an error???
(I have a master page in my design, but this implementation is in a web form).

-> I have 2011 Q3 Telerik version SP1...

[Peter Filipov]

Hi Konstantinos,

Regarding your issue is it possible to open a new support thread and send me your project to investigate it ? This will help us to solve your problem faster.

Kind regards,
Peter Filipov
the Telerik team

[Konstantinos]

Peter, thank you for the immediate reply...

So far I haven't been able to overcome the problem, 

However, I saw that by using the asp datepicker, it is possible to place a functional required field validator!
However again, the requirements of the project changed... So far we dont need to have such validations in the date field and user can insert null imputs.

If anything as such comes again and I am still not being able to overcome it, I will contact the telerik forums again... (in a new thread as suggested :D)

Thank you for your time and your patience,
Konstantinos Marinis

[Ross Dunham]

Greetings.
This works great.  How do I clear the error message immediately when a file is uploaded OR upon file selection.  I just want the error message to go away.  I don't want the user confused by the fact that they have uploaded a file, but the message is still being displayed.
Thanks,
Ross

[Princy]

Hi,

One suggestion is you can clear the errormesage on 'OnClientFileSelected' event of RadAsyncUpload.
JS:

function OnClientFileSelected(sender, args)
{
  var CustomValidator = document.getElementById("<%=CustomValidator.ClientID %>");
  CustomValidator.innerHTML = "";
}

Thanks,
Princy.

[Ross Dunham]

Hi Princy,
Thanks for the reply!  This got me going down the right path.  For some reason when I cleared the innerHTML it was killing the validator display for future validation.  So if you REMOVE the uploaded file and then trigger validation again, it will fail (as it should), but there will be no error message displayed.  So I did a little research and ended up with the following solution. Thanks again for your reply.

http://msdn.microsoft.com/en-us/library/Aa479045#aspplusvalid_clientside

function onFileUploaded(sender, args) {

    var CustomValidator = document.getElementById("<%=valCustomValidator.ClientID %>");

    ValidatorValidate(CustomValidator);

 }


[Sravan]

Hai....

   Please give me the solution for how to validate telerik Radasyncupoad...I tried many examples whatever post but that's not working in my  page and am using multiple Radasyncupload controls in original page..but i tried in new aspx page that time working fine.


 I used this code in my page

<script type="text/javascript">   
Telerik.Web.UI.RadAsyncUpload.prototype.getUploadedF

iles = function () {
           var files = [];

           $telerik.$(".ruUploadSuccess", 

this.get_element()).each(function (index, value) {
               files[index] = $telerik.$(value).text();
           });

           return files;
       }

       function validateUpload(sender, args) {
           var upload = $find("RadAsyncUpload1");
           args.IsValid = upload.getUploadedFiles().length 

!= 0;
       }
 
</script>

<asp:CustomValidator runat="server" 

ID="CustomValidator" 

ClientValidationFunction="validateUpload"
        ErrorMessage="Select at least a single file">
    </asp:CustomValidator>



Thanks in Advance.

[Shinu]

Hi Sravan,

Please have a look into the following code snippet to validate two RadAsyncUpload using CustomValidator.

ASPX:

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server">
</telerik:RadAsyncUpload>
<telerik:RadAsyncUpload ID="RadAsyncUpload2" runat="server">
</telerik:RadAsyncUpload>
<asp:CustomValidator runat="server" ID="CustomValidator" ValidationGroup="validateUpload"
    ClientValidationFunction="Demo" ErrorMessage="Select at least a single file"
    ValidateEmptyText="true">
</asp:CustomValidator>
<br />
<telerik:RadButton ID="RadButton1" Text="Validate" runat="server" CausesValidation="true"
    ValidationGroup="validateUpload">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function Demo(sender, args) {
        var upload = $find("<%= RadAsyncUpload1.ClientID %>");
        var upload1 = $find("<%= RadAsyncUpload2.ClientID %>");
        if (upload.getUploadedFiles().length != 0 && upload1.getUploadedFiles().length != 0)
            args.IsValid = true;
        else
            args.IsValid = false;
    }
</script>

Thanks,
Shinu.