<%@ 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.0 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 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" style="width: 0%;">0%</div> </div> <div id="progStatus" class="mt-2 small text-muted"></div> <div class="code-panel"> <pre><code>AjaxUploader.create(el, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 autoUpload: true,
 onProgress: function (file, percent) {
 bar.style.width = percent + '%';
 bar.textContent = Math.round(percent) + '%';
 },
 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> AjaxUploader.create(document.getElementById('progUploader'), {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: false,
 autoUpload: true,
 onProgress: function (file, percent) {
 var bar = document.getElementById('extProgressBar');
 bar.style.width = percent + '%';
 bar.textContent = Math.round(percent) + '%';
 },
 onComplete: function (file) {
 var bar = document.getElementById('extProgressBar');
 bar.classList.remove('progress-bar-animated');
 bar.classList.add('bg-success');
 bar.textContent = 'Done!';
 document.getElementById('progStatus').textContent = 'Uploaded: ' + file.name;
 },
 onError: function (file, error) {
 var bar = document.getElementById('extProgressBar');
 bar.classList.add('bg-danger');
 bar.textContent = 'Error';
 }
 });
</script>
</asp:Content>
