Required validator and RadAsyncUpload

19 posts, 0 answers
  1. Andrew
    Andrew avatar
    24 posts
    Member since:
    Nov 2006

    Posted 16 Dec 2010 Link to this post

    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.
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 20 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 29 Jun 2011 Link to this post

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

  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 05 Jul 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 08 Jul 2011 Link to this post

    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 ?


  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 13 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  8. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 14 Jul 2011 Link to this post

    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 ?
  9. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 19 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  10. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 20 Sep 2011 Link to this post

    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 ?
  11. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 23 Sep 2011 Link to this post

    Hi Shumaila,

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

    Regards, Peter Filipov
    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
  12. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 23 Sep 2011 Link to this post

    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.

  13. Konstantinos
    Konstantinos avatar
    8 posts
    Member since:
    Apr 2012

    Posted 02 Apr 2012 Link to this post

    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...
  14. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 05 Apr 2012 Link to this post

    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
    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.
  15. Konstantinos
    Konstantinos avatar
    8 posts
    Member since:
    Apr 2012

    Posted 05 Apr 2012 Link to this post

    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
  16. Ross Dunham
    Ross Dunham avatar
    11 posts
    Member since:
    Mar 2006

    Posted 28 May 2013 Link to this post

    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
  17. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 29 May 2013 Link to this post

    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.
  18. Ross Dunham
    Ross Dunham avatar
    11 posts
    Member since:
    Mar 2006

    Posted 29 May 2013 Link to this post

    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);
     }
  19. Sravan
    Sravan avatar
    1 posts
    Member since:
    Nov 2013

    Posted 20 Nov 2013 Link to this post

    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.
  20. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Nov 2013 Link to this post

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