<%@ 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.0 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="mb-3">
            <label for="txtName" class="form-label">Name</label>
            <asp:TextBox ID="txtName" runat="server" 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" 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">
            <label class="form-label">Profile Photo</label>
            <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>
