New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Validation

Upload your images

  • Allowed file types: jpg, jpeg, png, gif (client-side validation).
  • Allowed file size: 500 KB (client-side validation).
  • Allowed overall upload size: 1 MB (server-side validation).

Our validation demo demonstrates an easy way of combining RadAsyncUpload client-side and server-side validation: The area below the RadAsyncUpload lists all images passed the client-side validation successfully and shows an error message if current file fails. The server-side validation is dividing all uploaded files in two separate lists - one for the successfully saved images with total size less than 1 Mb and another one for the not saved images (due to exceeding that limit).

RadAsyncUpload can automatically validate files using the AllowedFilesExtensions and the MaxFileSize properties. All files with invalid extensions are rejected on the client, without wasting bandwidth to upload them to the server.

RadAsyncUpload provides client-side event called OnClientValidationFailed. It is fired when the selected file has invalid extension or its size exceeds the value set to the MaxFileSize property.

The sever-side FileUploaded event is fired separately for each and every uploaded file. Each file can be marked as a valid or invalid using the IsValid property of FileUploadedEventArgs. Valid files are automatically saved to the target folder.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="AsyncUpload.Examples.Validation.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type ="text/javascript" src="scripts.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <div class="qsf-demo-canvas">
            <h2>Upload your images</h2>
            <ul class="qsf-list">
                <li>
                    <strong>Allowed file types:</strong> jpg, jpeg, png, gif (client-side validation).
                </li>
                <li>
                    <strong>Allowed file size:</strong> 500 KB (client-side validation).
                </li>
                <li>
                    <strong>Allowed overall upload size:</strong> 1 MB (server-side validation).
                </li>
            </ul>

            <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" AllowedFileExtensions="jpg,jpeg,png,gif" TargetFolder="" MultipleFileSelection="Automatic" 
                MaxFileSize="524288" Skin="Silk" OnFileUploaded="RadAsyncUpload1_FileUploaded" OnClientValidationFailed="validationFailed" UploadedFilesRendering="BelowFileInput">
            </telerik:RadAsyncUpload>

            <div class="qsf-results">
                <telerik:RadButton RenderMode="Lightweight" runat="server" Skin="Silk" ID="BtnSubmit" Text="Validate the uploaded files" ></telerik:RadButton>


                <asp:Panel ID="ValidFiles" Visible="false" runat="server" CssClass="qsf-success">
                    <h3>You successfully uploaded:</h3>
                    <ul class="qsf-list" runat="server" id="ValidFilesList"></ul>
                </asp:Panel>

                <asp:Panel ID="InvalidFiles" Visible="false" runat="server" CssClass="qsf-error">
                    <h3>The Upload failed for:</h3>
                    <ul class="qsf-list ruError" runat="server" id="InValidFilesList">
                        <li>
                            <p class="ruErrorMessage">The size of your overall upload exceeded the maximum of 1 MB</p>
                        </li>
                    </ul>

                </asp:Panel>
                <telerik:RadButton RenderMode="Lightweight" Skin="Silk" ID="RefreshButton" runat="server" OnClick="RefreshButton_Click" Visible="false" Text="Back" ></telerik:RadButton>
            </div>

            <div class="qsf-decoration"></div>
        </div>
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function () {
                demo.initialize();
            });
            //]]>
        </script>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance