<%@ Page Title="Drop or Browse" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Drop or Browse - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Drop or Browse</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Combined Drop Zone and Browse Button</div>
    <div class="demo-card-body">
        <p class="demo-description">
            A single area that accepts dragged files and also contains a browse button.
            Users can interact whichever way they prefer.
        </p>

        <style>
            .drop-browse {
                border: 2px dashed #d1d5db; border-radius: 1rem;
                padding: 2rem; text-align: center;
                background: #f9fafb; transition: all 0.3s;
                position: relative;
            }
            .drop-browse.drag-over {
                border-color: #6366f1; background: #eef2ff;
                box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.08);
            }
            .drop-browse-icon { font-size: 2rem; margin-bottom: 0.5rem; color: #9ca3af; }
            .drop-browse-text { color: #6b7280; margin-bottom: 0.75rem; }
            .drop-browse-or {
                display: inline-block; margin: 0.5rem 0;
                color: #9ca3af; font-size: 0.85rem;
            }
        </style>

        <div id="dropBrowseZone" class="drop-browse">
            <div class="drop-browse-icon">&#9729;</div>
            <div class="drop-browse-text">Drag and drop files here</div>
            <div class="drop-browse-or">&mdash; or &mdash;</div>
            <div id="dropBrowseUploader"></div>
        </div>

        <div class="code-panel">
            <pre><code>&lt;div id="dropZone" class="drop-browse"&gt;
  &lt;div&gt;Drag and drop files here&lt;/div&gt;
  &lt;div&gt;&amp;mdash; or &amp;mdash;&lt;/div&gt;
  &lt;div id="uploader"&gt;&lt;/div&gt;
&lt;/div&gt;

AjaxUploader.create(document.getElementById('uploader'), {
  uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
  multiple: true,
  dropTarget: document.getElementById('dropZone')
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    (function () {
        var zone = document.getElementById('dropBrowseZone');
        var counter = 0;
        zone.addEventListener('dragenter', function (e) { e.preventDefault(); counter++; zone.classList.add('drag-over'); });
        zone.addEventListener('dragleave', function () { counter--; if (counter <= 0) { counter = 0; zone.classList.remove('drag-over'); } });
        zone.addEventListener('dragover', function (e) { e.preventDefault(); });
        zone.addEventListener('drop', function () { counter = 0; zone.classList.remove('drag-over'); });

        AjaxUploader.create(document.getElementById('dropBrowseUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            dropTarget: zone
        });
    })();
</script>
</asp:Content>
