<%@ Page Title="Form with File Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<script runat="server"> protected void BtnSubmit_Click(object sender, EventArgs e)
 {
 string name = txtName.Text;
 string email = txtEmail.Text;
 string category = ddlCategory.SelectedValue;
 string fileId = hdnFileId.Value;

 lblResult.Text = "Submitted! Name: " + Server.HtmlEncode(name)
 + ", Category: " + Server.HtmlEncode(category)
 + ", File ID: " + Server.HtmlEncode(fileId);
 lblResult.Visible = true;
 }
</script> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Form with File Upload - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Form with File Upload</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Form with File Upload</div> <div class="demo-card-body"> <p class="demo-description"> <strong>Embed AjaxFileUpload as a first-class form field</strong> alongside TextBox, DropDownList,
 and Button controls. The uploaded file ID is stored in a HiddenField and submitted with the postback - 
 so the server-side <code>FileUploaded</code> event and the form <code>Submit</code> stay independent and
 both have everything they need. This pattern works equally well with any of the v5.3 transport strategies
 (classic, chunked, S3, Azure, GCS, tus) without changing the C# code.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the uploader inside a bigger form: the file transfers out of band, its id lands in a hidden field, and the form submits independently.</div> <div style="max-width: 500px;"> <div class="mb-3"> <label class="form-label" for="txtName">Full Name</label> <asp:TextBox ID="txtName" runat="server" ClientIDMode="Static" CssClass="form-control" placeholder="John Doe" /> </div> <div class="mb-3"> <label class="form-label" for="txtEmail">Email</label> <asp:TextBox ID="txtEmail" runat="server" ClientIDMode="Static" CssClass="form-control" TextMode="Email" placeholder="john@example.com" /> </div> <div class="mb-3"> <label class="form-label" for="ddlCategory">Category</label> <asp:DropDownList ID="ddlCategory" runat="server" ClientIDMode="Static" CssClass="form-select"> <asp:ListItem Text="General" Value="general" /> <asp:ListItem Text="Technical" Value="technical" /> <asp:ListItem Text="Billing" Value="billing" /> </asp:DropDownList> </div> <div class="mb-3"> <div class="form-label">Attachment</div> <script>window.onFileUploaded = function (file, response) { if (typeof window.handleFileUploaded === 'function') window.handleFileUploaded(file, response); };</script> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AutoUpload="true"
 ShowProgress="true"
 OnClientUploadComplete="onFileUploaded" /> <asp:HiddenField ID="hdnFileId" runat="server" /> <div id="formFileInfo" class="form-text" aria-live="polite"></div> </div> <asp:Button ID="BtnSubmit" runat="server" Text="Submit Form"
 CssClass="btn btn-primary" OnClick="BtnSubmit_Click"
 OnClientClick="return formWithUploaderSubmit(this);" /> <asp:Label ID="lblResult" runat="server" CssClass="d-block mt-3 text-success fw-bold" role="status" aria-live="polite" Visible="false" /> </div> <div class="code-panel"> <pre><code>&lt;asp:TextBox ID="txtName" runat="server" CssClass="form-control" /&gt;
&lt;asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-select"&gt;
 &lt;asp:ListItem Text="General" Value="general" /&gt;
&lt;/asp:DropDownList&gt;

&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AutoUpload="true"
 ShowProgress="true"
 OnClientUploadComplete="onFileUploaded" /&gt;
&lt;asp:HiddenField ID="hdnFileId" runat="server" /&gt;

&lt;asp:Button ID="BtnSubmit" runat="server" Text="Submit"
 CssClass="btn btn-primary" OnClick="BtnSubmit_Click" /&gt;</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var fwuUploader = null;
 window.handleFileUploaded = function (file, response) {
 document.getElementById('<%= hdnFileId.ClientID %>').value =
 (response && (response.fileGuid || response.fileId || response.FileGuid)) || (file && file.name) || '';
 document.getElementById('formFileInfo').textContent = 'Attached: ' + (file && file.name ? file.name : '(unknown)');
 };
 // Find the uploader instance once the page is ready so we can check pending state on submit.
 document.addEventListener('DOMContentLoaded', function () {
 if (window.AjaxUploader && typeof AjaxUploader.getInstance === 'function') {
 fwuUploader = AjaxUploader.getInstance('Uploader1');
 }
 });
 function formWithUploaderSubmit(btn) {
 // If files are still uploading, defer the postback until they finish.
 if (fwuUploader && typeof fwuUploader.hasPendingUploads === 'function' && fwuUploader.hasPendingUploads()) {
 document.getElementById('formFileInfo').textContent = 'Please wait for the file upload to finish before submitting.';
 return false;
 }
 return true;
 }
</script>
</asp:Content>
