<%@ Page Title="Programmatic Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Programmatic Upload - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Programmatic Upload</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Programmatic Upload</div> <div class="demo-card-body"> <p class="demo-description"> Trigger file selection and upload entirely from JavaScript code. Use <code>browse()</code> to open the file dialog and <code>startUpload()</code> to begin uploading.
 </p> <div class="demo-expect"><strong>What you should see:</strong> no visible start control: files are added and started entirely from JavaScript calls. Auto-upload is off so the start call is explicit.</div> <div class="d-flex gap-2 mb-3"> <button type="button" class="btn btn-outline-secondary" id="progBrowseBtn">Browse Files</button> <button type="button" class="btn btn-primary" id="progUploadBtn">Upload All</button> <button type="button" class="btn btn-outline-danger" id="progClearBtn">Clear Queue</button> </div> <div id="progUploaderContainer"></div> <div id="progStatus" class="mt-2 text-muted" role="status" aria-live="polite"></div> <div class="code-panel"> <pre><code>var uploader = AjaxUploader.create(element, {
 multiple: true,
 autoUpload: false,
 showProgress: true
});

// Programmatic control
uploader.browse(); // Open file dialog
uploader.startUpload(); // Start uploading queued files
uploader.clearQueue(); // Remove all queued files</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var progUploader;
 document.addEventListener('DOMContentLoaded', function () {
 var host = document.getElementById('progUploaderContainer');
 var status = document.getElementById('progStatus');
 var browseButton = document.getElementById('progBrowseBtn');
 var uploadButton = document.getElementById('progUploadBtn');
 var clearButton = document.getElementById('progClearBtn');
 if (!host || !window.AjaxUploader || !AjaxUploader.create) {
 if (status) status.textContent = 'Uploader API is still loading. Refresh the page or try again in a moment.';
 return;
 }
 function setStatus(message) {
 if (status) status.textContent = message;
 }
 function wire(button, action) {
 if (!button) return;
 button.addEventListener('click', function () {
 if (progUploader && typeof progUploader[action] === 'function') {
 progUploader[action]();
 }
 });
 }
 progUploader = AjaxUploader.create(host, {
 multiple: true,
 autoUpload: false,
 showProgress: true,
 onSelect: function (file) {
 setStatus('Queued: ' + file.name);
 },
 onComplete: function (file) {
 setStatus(file.name + ' done!');
 }
 });
 wire(browseButton, 'browse');
 wire(uploadButton, 'startUpload');
 wire(clearButton, 'clearQueue');
 });
</script>
</asp:Content>
