<%@ 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.2 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="demo-expect"><strong>What you should see:</strong> a custom rule applied at selection time: files can be inspected and rejected before they ever join the queue.</div> <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" role="log" aria-live="polite" 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> (function () {
 var logEl = document.getElementById('log');
 function log(msg) {
 if (!logEl) return;
 var div = document.createElement('div');
 var isRejected = msg.indexOf('Rejected') !== -1;
 var time = document.createElement('span');
 time.className = 'text-muted';
 time.textContent = new Date().toLocaleTimeString();
 var message = document.createElement('span');
 message.className = isRejected ? 'text-danger' : 'text-success';
 message.textContent = msg;
 div.appendChild(time);
 div.appendChild(document.createTextNode(' '));
 div.appendChild(message);
 logEl.appendChild(div);
 logEl.scrollTop = logEl.scrollHeight;
 }

 var host = document.getElementById('uploader');
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 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>
