<%@ Page Title="Multiple Drop Zones" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Multiple Drop Zones - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Multiple Drop Zones</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Multiple Independent Drop Zones</div> <div class="demo-card-body"> <p class="demo-description"> Two separate drop zones, each with their own uploader instance and file list.
 Useful for categorizing uploads (e.g., documents vs. images).
 </p> <div class="demo-expect"><strong>What you should see:</strong> two independent zones on one page, each with its own accepted types and its own queue - dropping on one does not affect the other.</div> <style> .multi-zones { display: flex; gap: 1.5rem; flex-wrap: wrap; }
 .zone-card {
 flex: 1; min-width: 220px;
 border: 2px dashed #d1d5db; border-radius: 0.75rem;
 padding: 1.25rem; text-align: center;
 transition: border-color 0.3s, background 0.3s;
 }
 .zone-card.drag-over { border-color: #3b82f6; background: #eff6ff; }
 .zone-card h6 { margin: 0 0 0.75rem; font-weight: 600; }
 .zone-files { font-size: 0.8rem; color: #6b7280; margin-top: 0.5rem; text-align: left; }
 </style> <div class="multi-zones"> <div class="zone-card" id="zoneA"> <h6> Documents</h6> <div id="uploaderA"></div> <div class="zone-files" id="filesA"></div> </div> <div class="zone-card" id="zoneB"> <h6> Images</h6> <div id="uploaderB"></div> <div class="zone-files" id="filesB"></div> </div> </div> <div class="code-panel"> <pre><code>// Zone A - Documents
AjaxUploader.create(elA, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 allowedExtensions: '.pdf,.docx,.txt,.xlsx',
 dropTarget: zoneA
});

// Zone B - Images
AjaxUploader.create(elB, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 allowedExtensions: '.jpg,.png,.gif,.webp,.svg',
 dropTarget: zoneB
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 function setupZone(uploaderId, zoneId, filesId, exts) {
 if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 var zone = document.getElementById(zoneId);
 var files = document.getElementById(filesId);
 var host = document.getElementById(uploaderId);
 var counter = 0;
 if (!zone || !host) 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'); });

 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 allowedExtensions: exts,
 dropTarget: zone,
 onTaskComplete: function (task) {
 var p = document.createElement('div');
 p.textContent = '+ ' + task.fileName;
 if (files) files.appendChild(p);
 }
 });
 }
 setupZone('uploaderA', 'zoneA', 'filesA', '.pdf,.docx,.txt,.xlsx');
 setupZone('uploaderB', 'zoneB', 'filesB', '.jpg,.png,.gif,.webp,.svg');
 })();
</script>
</asp:Content>
