<%@ Page Title="Custom Progress Display" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Custom Progress Display - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Custom Progress Display</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Custom Progress via onTaskProgress</div> <div class="demo-card-body"> <p class="demo-description"> Build a fully custom progress display using the onTaskProgress callback. This example
 shows a circular progress indicator, speed gauge, and detailed statistics.
 </p> <au:AjaxFileUpload ID="Uploader1" runat="server" /> <div class="mt-3 d-flex align-items-center gap-4"> <div class="text-center"> <svg id="circleProgress" width="100" height="100" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="42" fill="none" stroke="#e9ecef" stroke-width="8"/> <circle id="progressCircle" cx="50" cy="50" r="42" fill="none" stroke="#0d6efd"
 stroke-width="8" stroke-dasharray="264" stroke-dashoffset="264"
 transform="rotate(-90 50 50)" stroke-linecap="round"/> <text id="percentText" x="50" y="54" text-anchor="middle" font-size="18" fill="#333">0%</text> </svg> </div> <div class="flex-grow-1"> <div class="mb-1"><small class="text-muted">File:</small> <span id="fileName">--</span></div> <div class="mb-1"><small class="text-muted">Speed:</small> <span id="speed">--</span></div> <div class="mb-1"><small class="text-muted">Uploaded:</small> <span id="uploaded">--</span></div> <div><small class="text-muted">ETA:</small> <span id="eta">--</span></div> </div> </div> <div class="code-panel"> <pre><code>var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('taskProgress', function(task) {
 var pct = task.percent;
 var offset = 264 - (264 * pct / 100);
 circle.setAttribute('stroke-dashoffset', offset);
 percentText.textContent = Math.round(pct) + '%';
 speed.textContent = AjaxUploader.formatSize(task.speed) + '/s';
 uploaded.textContent = AjaxUploader.formatSize(task.loaded) +
 ' / ' + AjaxUploader.formatSize(task.total);
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var circle = document.getElementById('progressCircle');
 var percentText = document.getElementById('percentText');
 var fileName = document.getElementById('fileName');
 var speed = document.getElementById('speed');
 var uploaded = document.getElementById('uploaded');
 var eta = document.getElementById('eta');

 var uploader = AjaxUploader.getInstance('Uploader1');
 if (uploader) {
 uploader.on('taskStart', function(task) {
 fileName.textContent = task.fileName;
 circle.setAttribute('stroke', '#0d6efd');
 });
 uploader.on('taskProgress', function(task) {
 var pct = task.percent;
 var offset = 264 - (264 * pct / 100);
 circle.setAttribute('stroke-dashoffset', offset);
 percentText.textContent = Math.round(pct) + '%';
 speed.textContent = AjaxUploader.formatSize(task.speed) + '/s';
 uploaded.textContent = AjaxUploader.formatSize(task.loaded) + ' / ' + AjaxUploader.formatSize(task.total);
 if (task.speed > 0) {
 eta.textContent = AjaxUploader.formatTime((task.total - task.loaded) / task.speed);
 }
 });
 uploader.on('taskComplete', function(task) {
 circle.setAttribute('stroke-dashoffset', '0');
 circle.setAttribute('stroke', '#198754');
 percentText.textContent = '100%';
 speed.textContent = 'Done';
 eta.textContent = '--';
 });
 }
</script>
</asp:Content>
