<%@ 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.3 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> <div class="demo-expect"><strong>What you should see:</strong> both routes into one queue: drop onto the zone, or use the browse button. Same handling either way.</div> <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"></div> <div class="drop-browse-text">Drag and drop files here</div> <div class="drop-browse-or"> - or - </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 host = document.getElementById('dropBrowseUploader');
 var counter = 0;
 if (!zone) return;
 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'); });

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