<%@ Page Title="Form Attach + Whole-Page Drop" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Form Attach &amp; Whole-Page Drop - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Form Auto-Attach + Whole-Page Drop Target</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="demo-card">
 <div class="demo-card-header">Submit the form - uploads run first, then the form is posted</div>
 <div class="demo-card-body">
 <p class="demo-description">
  Set <code>attachToForm: true</code> (or <code>formId: '...'</code>) and the uploader walks up to the
  nearest <code>&lt;form&gt;</code>, intercepts its submit, runs pending uploads, then re-submits.
  Combine with <code>wholePageDrop: true</code> so users can drop files anywhere on the page.
 </p>
 <div id="uploadFormFields">
 <div class="mb-3">
  <label class="form-label" for="uploadTitle">Title</label>
  <input type="text" id="uploadTitle" name="title" class="form-control" value="My upload" />
 </div>
 <div id="formUploader"></div>
 <button type="submit" class="btn btn-primary mt-3">Submit form</button>
 </div>
 <pre id="formLog" role="log" aria-live="polite" style="margin-top:12px;background:#f8f9fa;padding:8px;border-radius:4px;min-height:40px;font-size:12px;"></pre>
 <script>
 (function () {
  function init() {
   if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
   var log = document.getElementById('formLog');
   var pageForm = document.getElementById('form1') || document.querySelector('form');
   if (!log || !pageForm) {
    return;
   }
   AjaxUploader.create('#formUploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    autoUpload: false,
    attachToForm: true,         // walks up to the Web Forms page form
    formId: pageForm.id,
    wholePageDrop: true,        // drop anywhere on the page
    onFormSubmitBlocked: function (reason) {
     log.textContent = '[' + new Date().toLocaleTimeString() + '] submit blocked (' + reason + ') - uploading first...';
    },
    onComplete: function () {
     log.textContent += '\nUploads complete - resubmitting form.';
    }
   });
   pageForm.addEventListener('submit', function (event) {
    event.preventDefault();
    log.textContent = 'Form submitted at ' + new Date().toLocaleTimeString();
   });
  }
  if (document.readyState !== 'loading') init();
  else document.addEventListener('DOMContentLoaded', init);
 })();
 </script>
 <div class="alert alert-info mt-3" role="alert">
 <strong>Try it:</strong> drag a file from anywhere on the page (or click Browse), then click <em>Submit form</em>.
 The uploader holds the submission, uploads, then lets the form post.
 </div>
 <h5 class="mt-4">Configuration</h5>
 <div class="code-panel">
<pre><code>AjaxUploader.create('#uploader', {
 attachToForm: true,            <span style="color:#94a3b8">// or formId: 'form1'</span>
 wholePageDrop: true,           <span style="color:#94a3b8">// drop anywhere on the page</span>
 onFormSubmitBlocked: function (reason) {
  statusEl.textContent = 'Submit blocked: ' + reason;
 }
});</code></pre>
 </div>
 </div>
</div>
</asp:Content>
