<%@ Page Title="Drop Zone Overlay" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Drop Zone Overlay - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Drop Zone Overlay</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Overlay on Drag Enter</div> <div class="demo-card-body"> <p class="demo-description"> A semi-transparent overlay slides in when files are dragged over the
 target area, providing clear visual guidance for where to drop.
 </p> <div class="demo-expect"><strong>What you should see:</strong> an overlay appears over the container the moment a drag enters, showing exactly where the file will land, and disappears on drop or leave.</div> <style> .overlay-container {
 position: relative; min-height: 200px;
 border: 1px solid #e5e7eb; border-radius: 0.75rem;
 padding: 1.5rem; background: #fff;
 }
 .overlay-content p { color: #374151; }
 .drop-overlay {
 display: none; position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(59, 130, 246, 0.9);
 border-radius: 0.75rem; z-index: 10;
 align-items: center; justify-content: center;
 flex-direction: column; color: #fff;
 }
 .drop-overlay.active { display: flex; }
 .drop-overlay-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
 .drop-overlay-text { font-size: 1.1rem; font-weight: 600; }
 </style> <div id="overlayContainer" class="overlay-container"> <div class="overlay-content"> <p>This area contains regular page content. Try dragging a file over it
 to see the upload overlay appear.</p> <div id="overlayUploader"></div> </div> <div id="dropOverlay" class="drop-overlay"> <div class="drop-overlay-icon"></div> <div class="drop-overlay-text">Release to upload</div> </div> </div> <div class="code-panel"> <pre><code>&lt;div id="container" class="overlay-container"&gt;
 &lt;div class="overlay-content"&gt;
 &lt;p&gt;Regular page content here&lt;/p&gt;
 &lt;div id="uploader"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;div id="overlay" class="drop-overlay"&gt;
 Release to upload
 &lt;/div&gt;
&lt;/div&gt;

container.addEventListener('dragenter', function() {
 overlay.classList.add('active');
});
container.addEventListener('drop', function() {
 overlay.classList.remove('active');
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var container = document.getElementById('overlayContainer');
 var overlay = document.getElementById('dropOverlay');
 var host = document.getElementById('overlayUploader');
 var counter = 0;
 if (!container || !overlay) return;

 container.addEventListener('dragenter', function (e) {
 e.preventDefault(); counter++;
 overlay.classList.add('active');
 });
 container.addEventListener('dragleave', function () {
 counter--;
 if (counter <= 0) { counter = 0; overlay.classList.remove('active'); }
 });
 container.addEventListener('dragover', function (e) { e.preventDefault(); });
 container.addEventListener('drop', function () {
 counter = 0; overlay.classList.remove('active');
 });

 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 dropTarget: container
 });
 })();
</script>
</asp:Content>
