<%@ Page Title="Custom Client Validation" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Custom Client Validation - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Custom Client-Side Validation</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Custom Client-Side Validation</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Implement any custom validation logic in the <code>onSelect</code> callback. This example
            rejects files with spaces in the name and requires a naming convention.
        </p>

        <div id="customValUploader"></div>
        <div id="customValStatus" class="mt-2"></div>

        <div class="code-panel">
            <pre><code>AjaxUploader.create(element, {
    onSelect: function (file) {
        if (/\s/.test(file.name)) {
            alert('Filenames must not contain spaces.');
            return false;
        }
        if (!/^[a-zA-Z]/.test(file.name)) {
            alert('Filename must start with a letter.');
            return false;
        }
        return true;
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    document.addEventListener('DOMContentLoaded', function () {
        AjaxUploader.create(document.getElementById('customValUploader'), {
            multiple: true,
            autoUpload: true,
            showProgress: true,
            buttonText: 'Select Files',
            onSelect: function (file) {
                var statusEl = document.getElementById('customValStatus');
                // No spaces in filename
                if (/\s/.test(file.name)) {
                    statusEl.innerHTML = '<span class="text-danger">Rejected: filenames must not contain spaces.</span>';
                    return false;
                }
                // Must start with a letter
                if (!/^[a-zA-Z]/.test(file.name)) {
                    statusEl.innerHTML = '<span class="text-danger">Rejected: filename must start with a letter.</span>';
                    return false;
                }
                statusEl.innerHTML = '<span class="text-success">Accepted: ' + file.name + '</span>';
                return true;
            }
        });
    });
</script>
</asp:Content>
