<%@ Page Title="Box Picker" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Box Picker - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Box as a first-class remote source</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="demo-card">
    <div class="demo-card-header">Pick files from Box</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Box is a built-in remote source in v5.3. Configure your Box OAuth client ID once,
            then add <code>'box'</code> to <code>remoteSources</code>. The browser opens a Box
            OAuth popup, lists the root folder, and forwards picked files into the server-side
            <code>/import-url</code> pipeline with a bearer token attached.
        </p>

        <div class="demo-expect"><strong>What you should see:</strong> pick files from Box next to local browse - files stream from Box through your import endpoint, so tokens stay server-side.</div> <div class="alert alert-warning mt-3" role="alert">
            <strong>Setup required.</strong>
            <ol class="mt-2 mb-0">
                <li>Create a Box app at <code>app.box.com/developers/console</code>.</li>
                <li>Set the OAuth 2.0 redirect URI to this page's origin.</li>
                <li>Configure the adapter before <code>create()</code>:
<pre style="margin:0.5rem 0 0;background:rgba(0,0,0,0.04);padding:0.75rem;border-radius:0.5rem;font-size:0.8rem;"><code>AjaxUploader.configureRemoteSource('box', {
    clientId: 'YOUR_BOX_CLIENT_ID'
});</code></pre>
                </li>
            </ol>
        </div>

        <div class="d-flex gap-2 mb-2 mt-4">
            <button type="button" class="btn btn-primary" id="startBtn_boxUploader">Start upload</button>
            <button type="button" class="btn btn-outline-secondary" id="clearBtn_boxUploader">Clear queue</button>
        </div>
        <div id="boxUploader"></div>

        <script>
        (function () {
            function init() {
                if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
                // AjaxUploader.configureRemoteSource('box', { clientId: 'YOUR_BOX_CLIENT_ID' });
                var uploader = AjaxUploader.create('#boxUploader', {
                    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
                    multiple: true,
                    autoUpload: false,
                    remoteSources: ['box']
                });
                var startButton = document.getElementById('startBtn_boxUploader');
                var clearButton = document.getElementById('clearBtn_boxUploader');
                if (startButton) {
                    startButton.addEventListener('click', function () {
                        if (uploader && typeof uploader.upload === 'function') uploader.upload();
                    });
                }
                if (clearButton) {
                    clearButton.addEventListener('click', function () {
                        if (uploader && typeof uploader.clear === 'function') uploader.clear();
                    });
                }
            }
            if (document.readyState !== 'loading') init();
            else document.addEventListener('DOMContentLoaded', init);
        })();
        </script>

        <div class="code-panel">
<pre><code>AjaxUploader.configureRemoteSource('box', {
    clientId: 'YOUR_BOX_CLIENT_ID',
    redirectUri: 'https://example.com/oauth/box/callback'  // optional, defaults to current page
});

AjaxUploader.create('#uploader', {
    remoteSources: ['box']
});</code></pre>
        </div>
    </div>
</div>
</asp:Content>
