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