<%@ Page Title="Upload with Form" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Upload with Form - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">File Upload within a Form</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">File Upload within a Form</div> <div class="demo-card-body"> <p class="demo-description"> Embed the uploader inside a Web Forms page with other controls. Files upload independently
 via AJAX while the form collects additional data through postback.
 </p> <div class="demo-expect"><strong>What you should see:</strong> a photo field inside a normal form - <code>.jpg/.png</code> up to 2&nbsp;MB. The upload happens out of band and the form posts its own values separately.</div> <div class="mb-3"> <label for="txtName" class="form-label">Name</label> <asp:TextBox ID="txtName" runat="server" ClientIDMode="Static" CssClass="form-control" placeholder="Enter your name" /> </div> <div class="mb-3"> <label for="ddlCategory" class="form-label">Category</label> <asp:DropDownList ID="ddlCategory" runat="server" ClientIDMode="Static" CssClass="form-select"> <asp:ListItem Text="-- Select --" Value="" /> <asp:ListItem Text="Documents" Value="documents" /> <asp:ListItem Text="Images" Value="images" /> <asp:ListItem Text="Other" Value="other" /> </asp:DropDownList> </div> <div class="mb-3"> <div class="form-label">Profile Photo</div> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowedExtensions=".jpg,.png"
 MaxFileSize="2MB"
 ButtonText="Choose Photo"
 ShowProgress="true" /> </div> <asp:Button ID="btnSubmit" runat="server" Text="Submit Form" CssClass="btn btn-primary" /> <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="Documents" Value="documents" /&gt;
 &lt;asp:ListItem Text="Images" Value="images" /&gt;
&lt;/asp:DropDownList&gt;

&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowedExtensions=".jpg,.png"
 MaxFileSize="2MB"
 ButtonText="Choose Photo"
 ShowProgress="true" /&gt;

&lt;asp:Button ID="btnSubmit" runat="server" Text="Submit Form"
 CssClass="btn btn-primary" /&gt;</code></pre> </div> </div>
</div> 
</asp:Content>
