<%@ Page Title="JavaScript API" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">JavaScript API - AjaxUploader v5.0 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 id="jsApiUploader"></div> <div id="jsApiStatus" class="mt-2 text-muted"></div> <div class="code-panel"> <pre><code>AjaxUploader.create(document.getElementById('myUploader'), {
 multiple: true,
 maxFileSize: '5MB',
 allowedExtensions: ['.jpg', '.png', '.pdf'],
 autoUpload: true,
 showProgress: true,
 onSelect: function (file) { console.log('Selected:', file.name); },
 onProgress: function (file, percent) { console.log(percent + '%'); },
 onComplete: function (file, response) { console.log('Done!'); },
 onError: function (file, error) { console.log('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');
 AjaxUploader.create(document.getElementById('jsApiUploader'), {
 multiple: true,
 maxFileSize: '5MB',
 allowedExtensions: ['.jpg', '.png', '.pdf'],
 autoUpload: true,
 showProgress: true,
 onSelect: function (file) {
 statusEl.textContent = 'Selected: ' + file.name;
 },
 onProgress: function (file, percent) {
 statusEl.textContent = file.name + ': ' + percent + '%';
 },
 onComplete: function (file, response) {
 statusEl.textContent = file.name + ' uploaded successfully.';
 },
 onError: function (file, error) {
 statusEl.textContent = 'Error: ' + error;
 }
 });
 });
</script>
</asp:Content>
