<%@ 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.3 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> <div class="demo-expect"><strong>What you should see:</strong> file selection triggered from a button that lives outside the uploader entirely, via the JS API.</div> <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" role="status" aria-live="polite"></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
var button = document.getElementById('myButton');
if (button) {
 button.addEventListener('click', function () {
  if (uploader && typeof uploader.openFileDialog === 'function') uploader.openFileDialog();
 });
}</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var extHost = document.getElementById('extUploader');
 var extStatus = document.getElementById('extStatus');
 var customTrigger = document.getElementById('customTrigger');
 function setExternalStatus(message) {
 if (extStatus) extStatus.textContent = message;
 }
 var uploader = extHost && window.AjaxUploader && typeof AjaxUploader.create === 'function' ? AjaxUploader.create(extHost, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 onComplete: function (file) {
 setExternalStatus('Uploaded: ' + file.name);
 }
 }) : null;
 if (!uploader) setExternalStatus('Uploader API is still loading. Refresh the page or try again in a moment.');

 if (customTrigger) customTrigger.addEventListener('click', function () {
 if (!uploader || typeof uploader.openFileDialog !== 'function') {
 setExternalStatus('Uploader is not ready yet. Try again in a moment.');
 return;
 }
 uploader.openFileDialog();
 });
</script>
</asp:Content>
