<%@ Page Title="External Progress Bar" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">External Progress Bar - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">External Progress Bar</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">External Progress Bar</div> <div class="demo-card-body"> <p class="demo-description"> Drive a Bootstrap progress bar from AjaxUploader's <code>onProgress</code> callback.
 The built-in progress UI is bypassed in favor of a fully external element.
 </p> <div class="demo-expect"><strong>What you should see:</strong> progress rendered in your own bar elsewhere on the page; the built-in bar is unused. One file at a time.</div> <div id="progUploader"></div> <div class="progress mt-3" style="height: 24px;"> <div class="progress-bar progress-bar-striped progress-bar-animated"
 id="extProgressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width: 0%;">0%</div> </div> <div id="progStatus" class="mt-2 small text-muted" role="status" aria-live="polite"></div> <div class="code-panel"> <pre><code>AjaxUploader.create(el, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 autoUpload: true,
 onProgress: function (file, percent) {
 var safePercent = clampPercent(percent);
 bar.style.width = safePercent + '%';
 bar.setAttribute('aria-valuenow', safePercent);
 bar.textContent = safePercent + '%';
 },
 onComplete: function (file) {
 bar.classList.add('bg-success');
 bar.textContent = 'Done!';
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var host = document.getElementById('progUploader');
 var bar = document.getElementById('extProgressBar');
 var status = document.getElementById('progStatus');
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: false,
 autoUpload: true,
 onProgress: function (file, percent) {
 if (!bar) return;
 var safePercent = clampPercent(percent);
 bar.style.width = safePercent + '%';
 bar.textContent = safePercent + '%';
 },
 onComplete: function (file) {
 if (!bar) return;
 bar.setAttribute('aria-valuenow', 100);
 bar.classList.remove('progress-bar-animated');
 bar.classList.add('bg-success');
 bar.textContent = 'Done!';
 if (status) status.textContent = 'Uploaded: ' + file.name;
 },
 onError: function (file, error) {
 if (!bar) return;
 bar.setAttribute('aria-valuenow', 0);
 bar.classList.add('bg-danger');
 bar.textContent = 'Error';
 }
 });
 function clampPercent(value) {
 var pct = Number(value);
 if (!isFinite(pct)) return 0;
 return Math.max(0, Math.min(100, Math.round(pct)));
 }
 })();
</script>
</asp:Content>
