<%@ Page Title="Modal Uploader" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Modal Uploader - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Modal Uploader</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Modal Uploader</div> <div class="demo-card-body"> <p class="demo-description"> Open a file uploader inside a Bootstrap modal dialog. The uploader initializes
 when the modal is shown and uploads work normally within the overlay.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the uploader inside a dialog: focus is trapped while open and returns to the trigger on close.</div> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal"> Open Upload Dialog
 </button> <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="uploadModalTitle"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="uploadModalTitle">Upload Files</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close upload dialog"></button> </div> <div class="modal-body"> <div id="modalUploader"></div> <div id="modalStatus" class="mt-2 small text-muted" role="status" aria-live="polite"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="code-panel"> <pre><code>// Initialize uploader when modal opens
modalEl.addEventListener('shown.bs.modal', function () {
 AjaxUploader.create(document.getElementById('modalUploader'), {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 onComplete: function (file) {
 statusEl.textContent = 'Uploaded: ' + file.name;
 }
 });
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var modalEl = document.getElementById('uploadModal');
 var initialized = false;
 if (modalEl) modalEl.addEventListener('shown.bs.modal', function () {
 if (initialized) return;
 var host = document.getElementById('modalUploader');
 var status = document.getElementById('modalStatus');
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') {
 if (status) status.textContent = 'Uploader is not ready yet. Try again in a moment.';
 return;
 }
 initialized = true;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 onComplete: function (file) {
 if (status) status.textContent = 'Uploaded: ' + file.name;
 }
 });
 });
</script>
</asp:Content>
