<%@ Page Title="Custom Button" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Custom Button - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Custom Styled Upload Button</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Custom Styled Upload Button</div> <div class="demo-card-body"> <p class="demo-description"> Customize the upload button text using <code>ButtonText</code>, or use the JavaScript API
 to attach upload functionality to any custom-styled button or element.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the default button replaced with your own label (&quot;Upload Your Document&quot;); selection still auto-uploads with progress.</div> <h6>Using ButtonText Property</h6> <au:AjaxFileUpload ID="Uploader1" runat="server"
 ButtonText="Upload Your Document"
 AutoUpload="true"
 ShowProgress="true" /> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 ButtonText="Upload Your Document"
 AutoUpload="true"
 ShowProgress="true" /&gt;</code></pre> </div> <h6 class="mt-4">Using JavaScript API with Custom Element</h6> <button type="button" id="customBtn" class="btn btn-lg btn-outline-primary" style="border-style: dashed; padding: 20px 40px;"> <i class="bi bi-upload me-2" aria-hidden="true"></i> Click to Upload
 </button> <div id="customBtnUploader"></div> <div id="customBtnStatus" class="mt-2 text-muted" role="status" aria-live="polite"></div> <div class="code-panel"> <pre><code>&lt;button id="customBtn" class="btn btn-lg btn-outline-primary"&gt;
 Click to Upload
&lt;/button&gt;
&lt;div id="uploaderContainer"&gt;&lt;/div&gt;

&lt;script&gt;
AjaxUploader.create(document.getElementById('uploaderContainer'), {
 browseButton: document.getElementById('customBtn'),
 autoUpload: true,
 showProgress: true
});
&lt;/script&gt;</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> document.addEventListener('DOMContentLoaded', function () {
 var host = document.getElementById('customBtnUploader');
 var browseButton = document.getElementById('customBtn');
 var status = document.getElementById('customBtnStatus');
 if (!host || !browseButton || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 browseButton: browseButton,
 autoUpload: true,
 showProgress: true,
 onComplete: function (file) {
 if (status) status.textContent = file.name + ' uploaded!';
 }
 });
 });
</script>
</asp:Content>
