<%@ Page Title="OnSelect Filter" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">OnSelect Filter - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">OnSelect Filter</asp:Content>

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

<div class="demo-card">
    <div class="demo-card-header">Filter Files in onSelect Callback</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Use the onSelect callback to inspect and filter files before they enter the upload queue.
            Reject files based on custom criteria such as naming conventions or content checks.
        </p>

        <div class="alert alert-info small">
            <strong>Rules:</strong> Only files under 5 MB with .jpg, .png, or .pdf extensions are accepted.
            Filenames containing spaces are rejected.
        </div>

        <div id="uploader"></div>
        <div id="log" class="mt-3 p-2 bg-light border rounded" style="max-height:180px;overflow-y:auto;font-size:.85rem;"></div>

        <div class="code-panel">
            <pre><code>AjaxUploader.create('#uploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    onSelect: function(files) {
        var allowed = ['.jpg', '.png', '.pdf'];
        var maxSize = 5 * 1024 * 1024;
        return files.filter(function(f) {
            var ext = f.name.substring(f.name.lastIndexOf('.')).toLowerCase();
            if (allowed.indexOf(ext) === -1) {
                log('Rejected (type): ' + f.name);
                return false;
            }
            if (f.size > maxSize) {
                log('Rejected (size): ' + f.name);
                return false;
            }
            if (f.name.indexOf(' ') !== -1) {
                log('Rejected (spaces in name): ' + f.name);
                return false;
            }
            log('Accepted: ' + f.name);
            return true;
        });
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var logEl = document.getElementById('log');
    function log(msg) {
        var div = document.createElement('div');
        var isRejected = msg.indexOf('Rejected') !== -1;
        div.innerHTML = '<span class="text-muted">' + new Date().toLocaleTimeString() + '</span> ' +
            '<span class="' + (isRejected ? 'text-danger' : 'text-success') + '">' + msg + '</span>';
        logEl.appendChild(div);
        logEl.scrollTop = logEl.scrollHeight;
    }

    AjaxUploader.create(document.getElementById('uploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: true,
        onSelect: function(files) {
            var allowed = ['.jpg', '.png', '.pdf'];
            var maxSize = 5 * 1024 * 1024;
            return files.filter(function(f) {
                var ext = f.name.substring(f.name.lastIndexOf('.')).toLowerCase();
                if (allowed.indexOf(ext) === -1) {
                    log('Rejected (invalid type ' + ext + '): ' + f.name);
                    return false;
                }
                if (f.size > maxSize) {
                    log('Rejected (exceeds 5 MB): ' + f.name + ' (' + AjaxUploader.formatSize(f.size) + ')');
                    return false;
                }
                if (f.name.indexOf(' ') !== -1) {
                    log('Rejected (spaces in filename): ' + f.name);
                    return false;
                }
                log('Accepted: ' + f.name + ' (' + AjaxUploader.formatSize(f.size) + ')');
                return true;
            });
        },
        onTaskComplete: function(task) {
            log('Uploaded: ' + task.fileName);
        }
    });
</script>
</asp:Content>
