<%@ 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.0 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">
            Embed AjaxFileUpload as a field within a Web Forms page alongside TextBox,
            DropDownList, and Button controls. The uploaded file ID is stored in a
            HiddenField and submitted with the postback.
        </p>

        <div style="max-width: 500px;">
            <div class="mb-3">
                <label class="form-label">Full Name</label>
                <asp:TextBox ID="txtName" runat="server" CssClass="form-control" placeholder="John Doe" />
            </div>
            <div class="mb-3">
                <label class="form-label">Email</label>
                <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control" TextMode="Email" placeholder="john@example.com" />
            </div>
            <div class="mb-3">
                <label class="form-label">Category</label>
                <asp:DropDownList ID="ddlCategory" runat="server" 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">
                <label class="form-label">Attachment</label>
                <au:AjaxFileUpload ID="Uploader1" runat="server"
                    AutoUpload="true"
                    ShowProgress="true"
                    OnClientUploadComplete="onFileUploaded" />
                <asp:HiddenField ID="hdnFileId" runat="server" />
                <div id="formFileInfo" class="form-text"></div>
            </div>
            <asp:Button ID="BtnSubmit" runat="server" Text="Submit Form"
                CssClass="btn btn-primary" OnClick="BtnSubmit_Click" />
            <asp:Label ID="lblResult" runat="server" CssClass="d-block mt-3 text-success fw-bold" 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>
    function onFileUploaded(file, response) {
        document.getElementById('<%= hdnFileId.ClientID %>').value =
            (response && (response.fileGuid || response.fileId || response.FileGuid)) || file.name;
        document.getElementById('formFileInfo').textContent = 'Attached: ' + file.name;
    }
</script>
</asp:Content>
