<%@ Page Title="Unsplash photo source" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Unsplash photo source - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Unsplash photo source</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="demo-card">
  <div class="demo-card-header">Import photos directly from Unsplash</div>
  <div class="demo-card-body">
    <p class="demo-description">
      Unsplash joins Google Drive, Dropbox, OneDrive, and Box as a built-in remote source. Unlike the cloud-drive pickers it needs no OAuth popup - just a public Access Key. The picker opens a search box and a thumbnail grid; selected photos import through the same URL-import pipeline as any other remote file, and the demo honors Unsplash's guideline of pinging the per-photo download endpoint on selection.
    </p>
    <div class="card p-3 mt-3" style="background:#fff;border:1px solid #e2e8f0;">
      <label class="form-label fw-semibold small" for="unsplashKey">Your Unsplash Access Key (demo)</label>
      <div class="d-flex flex-wrap align-items-center gap-2">
        <input id="unsplashKey" type="text" class="form-control" style="max-width:380px" placeholder="Access Key from unsplash.com/developers" />
        <button type="button" class="btn btn-primary" id="unsplashConfigure">Enable Unsplash</button>
      </div>
      <div class="d-flex gap-2 mb-2 mt-3">
        <button type="button" class="btn btn-outline-secondary" id="startBtn_unsplashOut" disabled>Start upload</button>
      </div>
      <div id="unsplashStatus" class="form-text" aria-live="polite"></div>
      <div id="unsplashOut"></div>
      <p class="mt-2 text-muted small mb-0">Get a free Access Key at unsplash.com/developers. The key stays in the browser; searches call the Unsplash API directly.</p>
    </div>
    <script> (function () {
      function init() {
        if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
        var out = document.getElementById('unsplashOut');
        var startBtn = document.getElementById('startBtn_unsplashOut');
        var configureButton = document.getElementById('unsplashConfigure');
        var keyInput = document.getElementById('unsplashKey');
        var status = document.getElementById('unsplashStatus');
        var uploader = AjaxUploader.create(out, {
          uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
          multiple: true,
          autoUpload: false,
          remoteSources: ['unsplash']
        });
        if (configureButton) configureButton.addEventListener('click', function () {
          var key = keyInput ? keyInput.value.trim() : '';
          if (!key) { if (status) status.textContent = 'Enter an Access Key first.'; return; }
          if (typeof AjaxUploader.configureRemoteSource === 'function') {
            AjaxUploader.configureRemoteSource('unsplash', { accessKey: key });
          }
          if (status) status.textContent = 'Unsplash source enabled.';
          if (startBtn) startBtn.disabled = false;
          // Re-render so the Unsplash source button appears now that it is ready.
          if (uploader && typeof uploader._renderRemoteSources === 'function') uploader._renderRemoteSources();
        });
        if (startBtn) {
          startBtn.addEventListener('click', function () {
            if (uploader && typeof uploader.upload === 'function') uploader.upload();
          });
        }
      }
      if (document.readyState !== 'loading') init();
      else document.addEventListener('DOMContentLoaded', init);
    })(); </script>
    <div class="alert alert-info mt-3" role="alert">
      <strong>Try it:</strong> paste an Access Key, click <strong>Enable Unsplash</strong>, then use the Unsplash source button to search and pick photos. They land in the queue ready to upload.
    </div>
    <h5 class="mt-4">JavaScript API</h5>
    <div class="code-panel">
<pre><code><span style="color:#94a3b8">// One-time configuration with your Unsplash Access Key.</span>
AjaxUploader.configureRemoteSource('unsplash', { accessKey: 'YOUR_KEY' });

<span style="color:#94a3b8">// Enable the source on an uploader instance.</span>
AjaxUploader.create('#uploader', {
    remoteSources: ['googledrive', 'dropbox', 'onedrive', 'box', 'unsplash']
});</code></pre>
    </div>
  </div>
</div>
</asp:Content>
