<%@ 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.0 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"></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 = 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');

 AjaxUploader.create(document.getElementById('bsUploader'), {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 buttonText: 'Choose Files',
 buttonClass: 'btn btn-primary',
 onSelect: function (file) {
 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, '_');
 item.innerHTML = file.name +
 ' <span class="badge bg-secondary">' +
 (file.size / 1024).toFixed(1) + ' KB</span>';
 fileList.appendChild(item);
 },
 onProgress: function (file, percent) {
 progressEl.style.display = '';
 progressBar.style.width = percent + '%';
 },
 onComplete: function (file) {
 progressEl.style.display = 'none';
 progressBar.style.width = '0%';
 var item = document.getElementById('file-' + file.name.replace(/\W/g, '_'));
 if (item) {
 item.querySelector('.badge').className = 'badge bg-success';
 item.querySelector('.badge').textContent = 'Uploaded';
 }
 },
 onError: function (file, error) {
 statusEl.innerHTML = '<div class="alert alert-danger py-1">' + error + '</div>';
 }
 });
 });
</script>
</asp:Content>
