<%@ Page Title="External Upload Button" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">External Upload Button - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">External Upload Button</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">External Upload Button</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Use any HTML element as an upload trigger. The uploader is created on a hidden
            container and programmatically opened via a custom button click.
        </p>

        <button type="button" class="btn btn-primary" id="customTrigger">
            <i class="bi bi-cloud-upload me-1"></i> Click Me to Upload
        </button>
        <div id="extUploader" style="display:none;"></div>
        <div id="extStatus" class="mt-2 text-muted small"></div>

        <div class="code-panel">
            <pre><code>var uploader = AjaxUploader.create(el, {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    autoUpload: true
});

// Trigger upload from any element
document.getElementById('myButton').addEventListener('click', function () {
    uploader.openFileDialog();
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var uploader = AjaxUploader.create(document.getElementById('extUploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: true,
        autoUpload: true,
        onComplete: function (file) {
            document.getElementById('extStatus').textContent = 'Uploaded: ' + file.name;
        }
    });

    document.getElementById('customTrigger').addEventListener('click', function () {
        uploader.openFileDialog();
    });
</script>
</asp:Content>
