<%@ Page Title="Full-Page Drop" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Full-Page Drop - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Full-Page Drop</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Full-Page Drop Target</div> <div class="demo-card-body"> <p class="demo-description"> The entire page acts as a drop target. Drag a file anywhere on this page
 to trigger the upload. A visible overlay confirms the drop zone is active.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the entire page is the drop target - drag a file anywhere in the window and it joins the queue.</div> <style> #fullPageOverlay {
 display: none; position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(59, 130, 246, 0.12);
 border: 4px dashed #3b82f6;
 z-index: 9999;
 pointer-events: none;
 align-items: center; justify-content: center;
 }
 #fullPageOverlay.active { display: flex; }
 #fullPageOverlay span {
 font-size: 1.5rem; font-weight: 700; color: #1d4ed8;
 background: #fff; padding: 1rem 2rem; border-radius: 0.75rem;
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
 </style> <div id="fullPageOverlay"><span>Drop files to upload</span></div> <div id="fpUploader"></div> <div id="fpStatus" style="margin-top:0.75rem; font-size:0.85rem; color:#6b7280;" role="status" aria-live="polite"></div> <div class="code-panel"> <pre><code>AjaxUploader.create(el, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 dropTarget: document.documentElement
});

// Overlay shows on dragenter, hides on dragleave/drop
document.addEventListener('dragenter', showOverlay);
document.addEventListener('drop', hideOverlay);</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var overlay = document.getElementById('fullPageOverlay');
 var status = document.getElementById('fpStatus');
 var host = document.getElementById('fpUploader');
 var counter = 0;

 document.addEventListener('dragenter', function (e) {
 e.preventDefault();
 counter++;
 if (overlay) overlay.classList.add('active');
 });
 document.addEventListener('dragleave', function (e) {
 counter--;
 if (counter <= 0) { counter = 0; if (overlay) overlay.classList.remove('active'); }
 });
 document.addEventListener('dragover', function (e) { e.preventDefault(); });
 document.addEventListener('drop', function (e) {
 e.preventDefault();
 counter = 0;
 if (overlay) 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: document.documentElement,
 onTaskComplete: function (task) {
 if (status) status.textContent = 'Uploaded: ' + task.fileName;
 }
 });
 })();
</script>
</asp:Content>
