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