Async File Upload Javascript Validation fails

6 posts, 0 answers
  1. Mark
    Mark avatar
    3 posts
    Member since:
    May 2016

    Posted 17 May Link to this post

    I am having a problem validating the Async File upload control, using a Custom Validator and JavaScript.

    The JS I'm using is:

     function isAttachmentValid(sender, args) {

    var upload = $find("<%= RadUpload1.ClientID %>");
        args.IsValid = upload.getUploadedFiles().length != 0;

    }

    This works perfectly fine if I submit the form right away, but if I save the form and come back to it upload.getUploadedFiles().length always = 0 and validation fails.

    I should also note that I don't have access the server-side code so validation must be done on the client.

     

  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 18 May Link to this post

    Hi Mark,

    Please check this out: AsyncUpload Server Validation.

    Regards,
    Hristo Valyavicharski
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark
    Mark avatar
    3 posts
    Member since:
    May 2016

    Posted 18 May in reply to Hristo Valyavicharski Link to this post

    Hi Hristo,

    Thanks for that but I don't have access to the back-end code (C#/VB) that my application is using, therefore I can only do validation on the client (in JavaScript/Jquery).  I have tried the following, but the validation fails if the form is saved and reloaded (it works if you submit right away).

      function isAttachmentValid(sender, args) {
        debugger;
        var upload = $find("<%= RadUpload1.ClientID %>");
        args.IsValid = upload.getUploadedFiles().length != 0;
      }

  5. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 18 May Link to this post

    Control has its own validation functionality which you can use: 
    http://demos.telerik.com/aspnet-ajax/asyncupload/examples/validation/defaultcs.aspx
    http://docs.telerik.com/devtools/aspnet-ajax/controls/asyncupload/overview.html

    To handle the case where files with size of 0 bytes are uploaded you may use this:
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="scriptManager"></asp:ScriptManager>
        <telerik:RadAsyncUpload
            runat="server"
            ID="async"
            MultipleFileSelection="Automatic"
            OnClientFilesSelected="filesSelected"
            OnClientFileUploading="fileUploading">
        </telerik:RadAsyncUpload>
     
        <script type="text/javascript">
            var invalidFiles = [];
     
            function filesSelected(sender, args) {
                var files = sender._fileInput.files;
     
                for (var i = 0; i < files.length; i++) {
                    if (files[i].size === 0) {
                        invalidFiles.push(files[i].name);
                    }
                }
            }
     
            function fileUploading(sender, args) {
                if (invalidFiles.indexOf(args.get_fileName()) !== -1) {
                    args.set_cancel(true);
                    console.log(args.get_fileName());
                }
            }
        </script>
    </form>


    Regards,
    Hristo Valyavicharski
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Mark
    Mark avatar
    3 posts
    Member since:
    May 2016

    Posted 18 May in reply to Hristo Valyavicharski Link to this post

    Hi Hristo,

    I want to validate that at least one file has been uploaded when submitting the form.  This must be in done JavaScript.

    To do this I am currently using getUploadedFiles().length

    If I upload a file and then submit the form straight away the validation works correctly and getUploadedFiles().length = 1

    However, if I save the form and come back to it, the name of the file I uploaded appears underneath the control BUT getUploadedFiles().length = 0 and the validation fails, which is not what I want.

    Thanks

    Mark

  7. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 19 May Link to this post

    Try to validate the form when it is submitted:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <style type="text/css">
            p {
                margin: 0;
                color: blue;
            }
     
            div, p {
                margin-left: 10px;
            }
     
            span {
                color: red;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>
     
            <telerik:RadAsyncUpload runat="server"
                ID="async">
            </telerik:RadAsyncUpload>
            <span id="msg"></span>
     
            <asp:Button runat="server" Text="Submit" />
     
            <script type="text/javascript">
                var upload;
     
                function pageLoad() {
                    upload = $find("async");
                }
     
                $("form").submit(function (event) {
                    if (upload.getUploadedFiles().length === 0) {
                        event.preventDefault();
                    }
     
                    $("form").submit(function (event) {
                        if (upload.getUploadedFiles().length !== 0) {
                            $("#msg").text("Validated...").show();
                            return;
                        }
     
                        $("#msg").text("Not valid!").show().fadeOut(1000);
                        event.preventDefault();
                    });
                })
            </script>
        </form>
    </body>
    </html>


    Regards,
    Hristo Valyavicharski
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017