<%@ 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.0 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> <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" onclick="clearLog()">Clear</button> </div> <div id="eventLog" class="mt-2 p-2 bg-dark text-light border rounded font-monospace"
 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', 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', 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 eventCount = 0;

 function log(eventName, detail) {
 if (eventCount === 0) eventLog.innerHTML = '';
 eventCount++;
 var div = document.createElement('div');
 var color = eventName.includes('Error') ? '#dc3545' :
 eventName.includes('Complete') ? '#198754' :
 eventName.includes('Progress') ? '#6c757d' : '#0dcaf0';
 div.innerHTML = '<span class="text-muted">' + new Date().toLocaleTimeString() + '</span> ' +
 '<span style="color:' + color + ';">' + eventName + '</span>' +
 (detail ? ' <span class="text-light">' + detail + '</span>' : '');
 eventLog.appendChild(div);
 eventLog.scrollTop = eventLog.scrollHeight;
 }

 function clearLog() {
 eventLog.innerHTML = '<div class="text-muted">Log cleared.</div>';
 eventCount = 0;
 }

 var uploader = AjaxUploader.getInstance('Uploader1');
 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 + ' ' + Math.round(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 ' + Math.round(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'); });
 }
</script>
</asp:Content>
