<%@ 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.0 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>

        <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;">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
            </svg>
            Click to Upload
        </button>
        <div id="customBtnUploader"></div>
        <div id="customBtnStatus" class="mt-2 text-muted"></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 () {
        AjaxUploader.create(document.getElementById('customBtnUploader'), {
            browseButton: document.getElementById('customBtn'),
            autoUpload: true,
            showProgress: true,
            onComplete: function (file) {
                document.getElementById('customBtnStatus').textContent = file.name + ' uploaded!';
            }
        });
    });
</script>
</asp:Content>
