<%@ Page Title="Bootstrap Theme" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Bootstrap Theme - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Bootstrap Theme</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Bootstrap Theme</div> <div class="demo-card-body"> <p class="demo-description"> Style the uploader with Bootstrap classes for seamless integration with Bootstrap-based
 applications. Use the JavaScript API for full control over markup and CSS classes.
 </p> <div class="card"> <div class="card-body"> <h6 class="card-title">Upload Documents</h6> <div id="bsUploader"></div> <div id="bsProgress" class="progress mt-2" style="height: 6px; display: none;"> <div id="bsProgressBar" class="progress-bar bg-success" style="width: 0%"></div> </div> <div id="bsFileList" class="list-group mt-2"></div> <div id="bsStatus" class="mt-2" role="status" aria-live="polite"></div> </div> </div> <div class="code-panel"> <pre><code>AjaxUploader.create(element, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 buttonText: 'Choose Files',
 buttonClass: 'btn btn-primary',
 onSelect: function (file) {
 // Add Bootstrap list-group-item
 },
 onProgress: function (file, percent) {
 // Update Bootstrap progress bar
 progressBar.style.width = clampPercent(percent) + '%';
 },
 onComplete: function (file) {
 // Update badge to "Uploaded"
 },
 onError: function (file, error) {
 // Show Bootstrap alert
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> document.addEventListener('DOMContentLoaded', function () {
 var progressEl = document.getElementById('bsProgress');
 var progressBar = document.getElementById('bsProgressBar');
 var fileList = document.getElementById('bsFileList');
 var statusEl = document.getElementById('bsStatus');
 var host = document.getElementById('bsUploader');
 function clampPercent(value) {
 var pct = Number(value);
 if (!isFinite(pct)) return 0;
 return Math.max(0, Math.min(100, Math.round(pct)));
 }

 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 buttonText: 'Choose Files',
 buttonClass: 'btn btn-primary',
 onSelect: function (file) {
 if (!file || !file.name) return;
 var item = document.createElement('div');
 item.className = 'list-group-item d-flex justify-content-between align-items-center';
 item.id = 'file-' + file.name.replace(/\W/g, '_');
 var name = document.createElement('span');
 name.textContent = file.name;
 var badge = document.createElement('span');
 badge.className = 'badge bg-secondary';
 badge.textContent = ((file.size || 0) / 1024).toFixed(1) + ' KB';
 item.appendChild(name);
 item.appendChild(badge);
 if (fileList) fileList.appendChild(item);
 },
 onProgress: function (file, percent) {
 if (progressEl) progressEl.style.display = '';
 if (progressBar) progressBar.style.width = clampPercent(percent) + '%';
 },
 onComplete: function (file) {
 if (progressEl) progressEl.style.display = 'none';
 if (progressBar) progressBar.style.width = '0%';
 if (!file || !file.name) return;
 var item = document.getElementById('file-' + file.name.replace(/\W/g, '_'));
 if (item) {
 var badge = item.querySelector('.badge');
 if (badge) {
 badge.className = 'badge bg-success';
 badge.textContent = 'Uploaded';
 }
 }
 },
 onError: function (file, error) {
 var msg = error && error.message ? error.message : (error || 'Upload failed');
 if (!statusEl) return;
 statusEl.textContent = '';
 var alert = document.createElement('div');
 alert.className = 'alert alert-danger py-1';
 alert.textContent = msg;
 statusEl.appendChild(alert);
 }
 });
 });
</script>
</asp:Content>
