<%@ Page Title="Programmatic Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Programmatic Upload - AjaxUploader v5.0 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="d-flex gap-2 mb-3">
            <button type="button" class="btn btn-outline-secondary" onclick="progUploader.browse()">Browse Files</button>
            <button type="button" class="btn btn-primary" onclick="progUploader.startUpload()">Upload All</button>
            <button type="button" class="btn btn-outline-danger" onclick="progUploader.clearQueue()">Clear Queue</button>
        </div>
        <div id="progUploaderContainer"></div>
        <div id="progStatus" class="mt-2 text-muted"></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 () {
        progUploader = AjaxUploader.create(document.getElementById('progUploaderContainer'), {
            multiple: true,
            autoUpload: false,
            showProgress: true,
            onSelect: function (file) {
                document.getElementById('progStatus').textContent = 'Queued: ' + file.name;
            },
            onComplete: function (file) {
                document.getElementById('progStatus').textContent = file.name + ' done!';
            }
        });
    });
</script>
</asp:Content>
