<%@ Page Title="JavaScript API" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">JavaScript API - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">JavaScript API</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">JavaScript API</div> <div class="demo-card-body"> <p class="demo-description"> Use <code>AjaxUploader.create()</code> for full programmatic control. The JavaScript API
 provides callbacks for every stage of the upload lifecycle.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the same engine driven from JavaScript instead of the server control - <code>AjaxUploader.create()</code> with options, no <code>&lt;au:&gt;</code> tag.</div> <div id="jsApiUploader"></div> <div id="jsApiStatus" class="mt-2 text-muted" role="status" aria-live="polite"></div> <div class="code-panel"> <pre><code>AjaxUploader.create(document.getElementById('myUploader'), {
 multiple: true,
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 maxFileSize: 5 * 1024 * 1024,
 allowedExtensions: ['.jpg', '.png', '.pdf'],
 autoUpload: true,
 showProgress: true,
 onSelect: function (file) { statusEl.textContent = 'Selected: ' + file.name; },
 onProgress: function (file, percent) { statusEl.textContent = clampPercent(percent) + '%'; },
 onComplete: function (file, response) { statusEl.textContent = 'Done!'; },
 onError: function (file, error) { statusEl.textContent = 'Error: ' + error; }
});

// Or get an existing server control instance:
var uploader = AjaxUploader.getInstance('Uploader1');
uploader.browse();
uploader.pause();
uploader.resume();
uploader.cancel();
uploader.clear();
var files = uploader.getFiles();</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> document.addEventListener('DOMContentLoaded', function () {
 var statusEl = document.getElementById('jsApiStatus');
 var host = document.getElementById('jsApiUploader');
 function setStatus(message) {
 if (statusEl) statusEl.textContent = message;
 }
 function clampPercent(value) {
 var pct = Number(value);
 if (!isFinite(pct)) return 0;
 return Math.max(0, Math.min(100, Math.round(pct)));
 }
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') {
 setStatus('Uploader API is still loading. Refresh the page or try again in a moment.');
 return;
 }
 try {
 AjaxUploader.create(host, {
 multiple: true,
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 autoUpload: true,
 onSelect: function (file) {
 setStatus('Selected: ' + file.name);
 },
 onProgress: function (file, percent) {
 setStatus(file.name + ': ' + clampPercent(percent) + '%');
 },
 onComplete: function (file, response) {
 setStatus(file.name + ' uploaded successfully.');
 },
 onError: function (file, error) {
 setStatus('Error: ' + error);
 }
 });
 } catch (error) {
 setStatus('Uploader API could not initialize on this page. Check the browser console for details.');
 if (window.console && console.warn) {
 console.warn('AjaxUploader JavaScript API demo initialization failed.', error);
 }
 }
 });
</script>
</asp:Content>
