<%@ Page Title="All Client Events" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">All Client Events - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">All Client Events</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">All Client-Side Events</div> <div class="demo-card-body"> <p class="demo-description"> Monitor every client-side event fired by AjaxUploader in a live event panel.
 Select a file to see events as they occur in real time.
 </p> <div class="demo-expect"><strong>What you should see:</strong> a running log of every client-side event in firing order - the quickest way to learn the real lifecycle before wiring your own handlers.</div> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ShowProgress="true" /> <div class="mt-3 d-flex justify-content-between align-items-center"> <h6 class="mb-0">Live Event Log</h6> <button type="button" class="btn btn-outline-secondary btn-sm" id="clearEventLogBtn">Clear</button> </div> <div id="eventLog" class="mt-2 p-2 bg-dark text-light border rounded font-monospace" role="log" aria-live="polite"
 style="max-height:250px;overflow-y:auto;font-size:.8rem;"> <div class="text-muted">Waiting for events...</div> </div> <div class="code-panel"> <pre><code>var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('select', function(files) { log('onSelect', files.length + ' files'); });
uploader.on('taskStart', function(task) { log('onTaskStart', task.fileName); });
uploader.on('taskProgress', function(task) { log('onTaskProgress', clampPercent(task.percent) + '%'); });
uploader.on('taskComplete', function(task) { log('onTaskComplete', task.fileName); });
uploader.on('taskError', function(task, err) { log('onTaskError', err); });
uploader.on('progress', function(info) { log('onProgress', clampPercent(info.percent) + '%'); });
uploader.on('complete', function() { log('onComplete'); });
uploader.on('error', function(err) { log('onError', err); });
uploader.on('queueRender', function(queue) { log('onQueueRender', queue.length + ' items'); });</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var eventLog = document.getElementById('eventLog');
 var clearButton = document.getElementById('clearEventLogBtn');
 var eventCount = 0;
 function clampPercent(value) {
 var pct = Number(value);
 if (!isFinite(pct)) return 0;
 return Math.max(0, Math.min(100, Math.round(pct)));
 }

 function log(eventName, detail) {
 if (!eventLog) return;
 if (eventCount === 0) eventLog.textContent = '';
 eventCount++;
 var div = document.createElement('div');
 var color = eventName.includes('Error') ? '#dc3545' :
 eventName.includes('Complete') ? '#198754' :
 eventName.includes('Progress') ? '#6c757d' : '#0dcaf0';
 var time = document.createElement('span');
 time.className = 'text-muted';
 time.textContent = new Date().toLocaleTimeString();
 var event = document.createElement('span');
 event.style.color = color;
 event.textContent = eventName;
 div.appendChild(time);
 div.appendChild(document.createTextNode(' '));
 div.appendChild(event);
 if (detail) {
 var detailEl = document.createElement('span');
 detailEl.className = 'text-light';
 detailEl.textContent = detail;
 div.appendChild(document.createTextNode(' '));
 div.appendChild(detailEl);
 }
 eventLog.appendChild(div);
 eventLog.scrollTop = eventLog.scrollHeight;
 }

 function clearLog() {
 if (!eventLog) return;
 eventLog.textContent = '';
 var div = document.createElement('div');
 div.className = 'text-muted';
 div.textContent = 'Log cleared.';
 eventLog.appendChild(div);
 eventCount = 0;
 }

 var uploader = window.AjaxUploader && AjaxUploader.getInstance ? AjaxUploader.getInstance('Uploader1') : null;
 if (uploader) {
 uploader.on('select', function(files) { log('onSelect', files.length + ' file(s) selected'); });
 uploader.on('taskStart', function(task) { log('onTaskStart', task.fileName); });
 uploader.on('taskProgress', function(task) { log('onTaskProgress', task.fileName + ' ' + clampPercent(task.percent) + '%'); });
 uploader.on('taskComplete', function(task) { log('onTaskComplete', task.fileName); });
 uploader.on('taskError', function(task, err) { log('onTaskError', task.fileName + ': ' + err); });
 uploader.on('progress', function(info) { log('onProgress', 'Overall ' + clampPercent(info.percent) + '%'); });
 uploader.on('complete', function() { log('onComplete', 'All uploads finished'); });
 uploader.on('error', function(err) { log('onError', err); });
 uploader.on('queueRender', function(queue) { log('onQueueRender', queue.length + ' items'); });
 }
 if (clearButton) clearButton.addEventListener('click', clearLog);
</script>
</asp:Content>
